在 Angular 2 Material 中将 md-tab-group body min height 更改为 0

Question

这里是 a plunker demo，它使用了 Angular 2 Material 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>

呈现为主体高度为 200 像素的选项卡。它使用 flex 布局，我无法从源代码中找到如何更改最小高度。实际上，此样式已列出 md-tab-group:

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

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

看来问题是 2.0.0-alpha.5 和 2.0.0-alpha.5-2 特有的，它没有出现在 master。

Answer 1

如果您注意到，'md-tab-label'
的孩子的身高为 48px
.md-tab-label[_ngcontent-rru-2] { line-height: 48px; 高度：48px;}
所以剩余的高度(200px)被'md-tab-content'占用了。
您可以在您的应用 CSS 文件中将 'md-tab-group' 的 min-height 覆盖为零。（阅读CSS特异性）

Answer 2

组件样式属性中可以恢复最小高度；

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
md-tab-group {
  background:#fff;
  min-height:0;
}
  `],
  directives: [MD_TABS_DIRECTIVES]
})

在 Angular 2 Material 中将 md-tab-group body min height 更改为 0

Change md-tab-group body min height to 0 in Angular 2 Material

css

flexbox

material-design

angular2-material

angular