gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 23:18:08 25 4
gpt4 key购买 nike

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

这就是我所看到的:
enter image description here

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

<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

最佳答案

这是获取 Material 选项卡内容所需执行的操作,它包含在 div.mat-tab-body-content 中。您的示例的全高:

  • 虽然你有 html/body设置为 100% , <material-app>没有扩大到全高。使用 :host { min-height: 100vh; }在链接的组件样式表中,确保它扩展到全高
  • div.mat-tab-body-wrapper 也会出现类似的问题。使用 <md-tab> 时生成的并包装所有选项卡内容。使用 CSS,无论是在组件样式中还是在全局的某个地方,例如 style.css , 它需要设置为 flex: 1; ,这将占用尽可能多的剩余空间。 height: 100%;也可以。
  • 最后是第一个/ child div div.mat-tab-body-content 内部没有类需要height: 100%;占据所有 parent 的剩余高度,包括div.mat-tab-body-wrapperdiv.mat-tab-body正在拉伸(stretch)到全高。

  • 使用这种方法,它应该适应动态工具栏和页脚大小。

    希望这会有所帮助!

    关于angular - 使用 flex-layout 填充 Angular Material 2 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45219595/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com