web-dev-qa-db-ja.com

Angular Materialタブの高さ

私はフルページAngularフルハイトで中央のメッセージを持つタブを持つマテリアルタブを作成しようとしています。私はできません this stakblitz を作成しましたfxFillは塗りつぶされていないようです。これがFlexboxレイアウトまたはAngular Material。Iの問題かどうかはわかりません。柔軟なレイアウトのポイントを無効にするように見えるため、各タブ内の高さを強制したくない。

確かにシンプルですが、Bootstrap grid :)に慣れている貧弱な混乱した開発者を助けます

[〜＃〜] update [〜＃〜]height：calc（100vh-100px）;親divに、そしてtall.component divにも動作しますが、これは悪い解決策です

angularangular-flex-layout
8
Mad Eddie

ページを埋めるために、ページはウィンドウを埋める必要があります。

styles.css

body, html{
  height: 100%;
  margin: 0;
}

アプリコンポーネントは本文を埋める必要があります。

app.component.css

:Host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

デフォルトでは、タブ内のコンテンツのラッパーはタブの高さを埋めていないため、これを修正します。

styles.css

.mat-tab-body-wrapper{
  flex-grow: 1;
}

また、mat-tab-groupは高さを埋めます。親も高さを埋める必要があるため、ラッパーとタブグループの両方にIDを与えます。

app.component.ts

<div id="wrapper"> <!-- give it an id -->
    <div fxLayout="row" fxLayoutGap="16px" fxFill>
        <div fxFlex="20">
            <p>Fun Sidebar</p>
        </div>
        <div fxFlex="80" fxFill>
            <mat-tab-group id="tab-group"> <!-- give it an id -->
                <mat-tab label="Summary">
                    <div fxFlex style="padding: 16px;">
                        <div class="mat-display-2">Hello</div>
                        <p>Lorem ipsulem</p>
                    </div>
                </mat-tab>
                <mat-tab label="Tall content">
                    <app-tall-component></app-tall-component>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>

app.component.css

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}

https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html

18
Ploppy

これは、身長に動的な値を割り当てるために働いています。

:Host ::ng-deep .mat-tab-body-wrapper {
  height: 600px;

}

:Host ::ng-deep .mat-tab-body.mat-tab-body-active {
  height: 600px;

}
1
haranloga