Angular Material 标签高度

Question

我正在尝试制作一个完整的页面 Angular Material 标签，其中的标签全高且消息居中。我创建了 this stakblitz，因为我无法让它工作。 fxFill 似乎没有填充，我不确定这是 Flexbox 布局的问题还是 Angular Material。我不想在每个选项卡中强制设置高度，因为这似乎违背了灵活布局的要点。

我相信它很简单，但可以帮助那些习惯于 Bootstrap 网格的可怜的困惑的开发人员 :)

更新添加 height: calc(100vh - 100px); 到父级 div 然后也添加到 tall.component div 使事情正常，但 这肯定是一个糟糕的解决方案

Answer 1

为了填充页面，页面需要填充window:

styles.css

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

app组件需要填充body：

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.html

<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

Answer 2

根据Angular docs：您需要将 dynamicHeight 输入设置为 true <mat-tab-group dynamicHeight>

By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.

Answer 3

这对我来说很有用，可以为高度分配动态值。

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

}

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

}

Angular Material 标签高度

Angular Material tab height

angular

angular-flex-layout