用 flex-layout 填充 Angular Material 2 个选项卡

Question

我正在尝试使用 Angular Material 2, and flex-layout 创建一个选项卡式应用程序。我不知道如何让选项卡的内容展开以填满屏幕。

这是我看到的：

我的布局代码如下，包括工具栏和页脚。

<div fxFlex fxLayout="column">

  <md-toolbar color="primary">
    Toolbar
  </md-toolbar>

  <md-tab-group>

    <md-tab label="Tab 1">
      <div fxFlex fxLayout="column" style="background-color:lightblue;padding:10px">
        <div style="background:lightgreen;">This should stay as it is</div>
        <div fxFlex style="background:lightgray;">This should expand so it fills the majorty of the screen</div>
      </div>
    </md-tab>

    <md-tab label="Tab 2">
      <h1>some content page 2</h1>
    </md-tab>

    <md-tab label="Tab 3">
      <h1>some content page 3</h1>
    </md-tab>

  </md-tab-group>

  <div>Footer</div>
</div>

我在不同的地方放置了 fxFlex 并创建了额外的 div 容器，但都没有成功。有什么想法吗？

Plunkr 在此处创建：http://plnkr.co/edit/eU413bX36I6aZFRTs6cg?p=preview

Answer 1

这是获取 material 标签内容所需要做的，在您的示例中，标签内容以 div.mat-tab-body-content 全高包裹：

虽然您将 html/body 设置为 100%，但 <material-app> 并未展开至全高。在链接的组件样式表中使用 :host { min-height: 100vh; }，确保它扩展到全高
使用 <md-tab> 时生成的 div.mat-tab-body-wrapper 会出现类似的问题并包装所有选项卡内容。使用 CSS，无论是在组件样式中还是全局某个地方，例如 style.css，都需要将其设置为 flex: 1;，这将占用与剩余的 space 一样多的可能的。 height: 100%; 也可以。
最后 div.mat-tab-body-content 里面的 first/child div 没有 class 需要 height: 100%; 来占据剩余的高度，因为所有它是 parents，包括 div.mat-tab-body-wrapper 和 div.mat-tab-body 正在拉伸到全高。

使用这种方法，它应该可以适应动态工具栏和页脚的大小。

希望对您有所帮助！

Answer 2

如果您需要所有标签的高度相同，请为您的标签组设置最小高度

<md-tab-group style='min-height:800px;'>

用 flex-layout 填充 Angular Material 2 个选项卡

Fill Angular Material 2 tab with flex-layout

angular

angular-material2

angular-flex-layout