0

这是一个使用 Angular 2 Material组件的 plunker 演示。md-tab-group

基本上，这

<md-tab-group>
    <md-tab>
        <template md-tab-label>Tab</template>
        <template md-tab-content>
            <md-content class="md-padding">
                <p>200 px height</p>
            </md-content>
        </template>
    </md-tab>
</md-tab-group>

呈现到具有 200px 高度的主体的选项卡。它使用 flex 布局，我无法从源代码中找到如何更改最小高度。实际上，这种风格是为md-tab-group：

[_nghost-vvf-2] {
    display: flex;
    flex-direction: column;
    font-family: Roboto,"Helvetica Neue",sans-serif;
    min-height: 248px;
}

如何正确地将最小高度恢复为0 md-tab-group？这min-height是从哪里来的？

看来问题是特定于2.0.0-alpha.5and2.0.0-alpha.5-2的，它没有出现在master.

4

2 回答 2

1

  1. 如果您注意到，“md-tab-label”的子级声明了 48px 高度

    .md-tab-label[_ngcontent-rru-2] { line-height: 48px; 高度：48 像素；}

  2. 所以剩余的高度（200px）由“md-tab-content”获取。

  3. 您可以在应用程序 CSS 文件中将“md-tab-group”的最小高度覆盖为零。（阅读 CSS 特性）

于 2016-06-26T18:47:52.427 回答
1

min-height 可以在组件样式属性中恢复；

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
md-tab-group {
  background:#fff;
  min-height:0;
}
  `],
  directives: [MD_TABS_DIRECTIVES]
})
于 2016-06-26T18:51:49.603 回答