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 の本体を持つタブにレンダリングされます。フレックスレイアウトを使用していますが、最小高さを変更する方法をソースから見つけることができません。実際、このスタイルは次のようにリストされてい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。

4

2 に答える 2

1

  1. お気づきの場合は、「md-tab-label」の子に対して 48 ピクセルの高さが宣言されています。

    .md-tab-label[_ngcontent-rru-2] { 行の高さ: 48px; 高さ: 48px;}

  2. したがって、残りの高さ (200px) は「md-tab-content」によって取得されます。

  3. アプリの CSS ファイルで「md-tab-group」の min-height をゼロにオーバーライドできます。(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 に答える