html - 如何将 Material ui 选项卡移动到我的内容下方并将内容扩展到全高？

Question

我正在使用 Material UI 选项卡 ( https://material.angular.io/components/tabs/overview ) 中的选项卡。如何使我的选项卡位于内容区域下方？

<md-tab-group>
    <md-tab label="Tab 1">
        Content
    </md-tab>            
    <md-tab label="Tab 2">
        Content
    </md-tab>
</md-tab-group>

我尝试将以下内容放在 md-tab-group 上，但它似乎必须生效:

md-tabs-align="bottom"

我还希望选项卡内容填满整个 div，而不是仅仅根据我拥有的少量文本调整大小。

Answer 1

您可以使用 CSS3 flex-box 轻松做到这一点。

mat-tab-group{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

Check the image