角度材料选项卡高度

Question

我正在尝试使用整页Angular Material选项卡,其中包含完整高度且具有居中消息的选项卡.我已经创建了这个stakblitz,因为我无法让它工作.fxFill似乎没有填充,我不确定这是Flexbox布局还是Angular Material的问题.我不想在每个标签内强制高度,因为这似乎打破了灵活布局的要点.

我肯定它很简单,但帮助一个穷困惑的开发人员习惯Bootstrap网格:)

更新 添加高度:计算(100vh - 100px); 到父div,然后到tall.component div使事情工作,但肯定这是一个糟糕的解决方案

Answer 1

为了填充页面,页面需要填充窗口:

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

Answer 2

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

默认情况下，选项卡组不会将其高度更改为当前活动选项卡的高度。要更改此设置，请将dynamicHeight 输入设置为true。选项卡主体将根据活动选项卡的高度设置其高度的动画。

Answer 3

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

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

}

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

}