Material 设计 2 个选项卡底部对齐

Question

我想让选项卡在 md-tab-group 的底部对齐，如下所示：

可以在 Material 1 中使用 md-tabs-align="bottom"。 Material 2 中是否有任何可用于此目的的内容？

这是我的代码：

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

Answer 1

请参阅 design document for md-tabs 中有关属性的部分：

Properties

These properties can be applied to any of the root tab component tags: md-tab-group, md-router-tabs, md-tab-bar, md-tab-outlet

[barPosition] - string - Tells the tabs component where to position the tab header - Options: top, bottom

[alignTabs] - string - Tells the tabs component how to align tabs - Options: start, end, center, stretch

编辑#1

确实不行。我在 [barPosition]="bottom" 中遇到了同样的错误。另外，文中npm link只列出了一个属性：selectedIndex。因此我认为，没有简单或内置的方法可以将选项卡放在底部。

编辑 #2

您不使用 Ionic 2，是吗？如果是，也许 this 有帮助。

Answer 2

对于可能偶然发现这个问题的人。

The Tabs section of the component demo site references the following in the API Reference section

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

After looking through the source I found the following:

/** 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>

Answer 3

跳出框框思考。将 UI 上下翻转，然后将内容翻转回右侧。

md-tab-group{
    display:flex;
    transform:rotate(180deg);
    .mat-tab-labels{
        display:flex;
        flex-direction: row-reverse;
        justify-content:space-around;
        & > div{
            flex: 1;
            transform: rotate(180deg);
        }
    }
    md-tab-body{
        transform:rotate(180deg);
        padding:20px;
    }
}

.mat-tab-body-wrapper{
    flex:1;
}

Material 设计 2 个选项卡底部对齐

Material Design 2 Tabs aligned at bottom

angular

material-design

angular-material2