如何将 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

Answer 2

我认为这是使用内置输入的更好解决方案：

底部

--- 从那个 link ---

组件演示站点的选项卡部分引用了 API 参考部分中的以下内容

@Input()            | Position of the tab header.
headerPosition      |

查看源代码后，我发现了以下内容：

/** Possible positions for the tab header. */
export type MdTabHeaderPosition = 'above' | 'below';

因此，以下对我有用

<md-tab-group headerPosition="below"> 
  <md-tab label="Tab One"> 
     Tab One Contents 
  </md-tab> 
  <md-tab label="Tab Two"> 
    Tab Two Contents 
  </md-tab> 
</md-tab-group>

如何将 material ui 标签移动到我的内容下方并使内容展开到全高？

How to move material ui tabs below my content and have the content expand to full height?

html

css

angular-material2

angular