Material Design 2 标签在底部对齐答案

【问题标题】：Material Design 2 Tabs aligned at bottomMaterial Design 2 标签在底部对齐
【发布时间】：2016-12-23 12:51:52
【问题描述】：

我想让标签在 md-tab-group 的底部对齐，如下所示：

在材料 1 中可以使用 md-tabs-align="bottom"。材料 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>

【问题讨论】：

标签： angular material-design angular-material2

【解决方案1】：

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

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>

【讨论】：

是的，这是我在 github 上打开功能请求后实现的。 github.com/angular/material2/issues/2387
发表此评论以强调您对如何找到解决方案的解释。我建议更多人这样做，因为它可以帮助我们大家更快地找到解决方案！

【解决方案2】：

跳出框框思考。将 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;
}

【讨论】：

这也将标签对齐到整个 UI 底部的空间。如果您正在构建移动界面，则非常适合。
太棒了！但是该功能现在已经在材料中可用了:)

【解决方案3】：

查看design document for md-tabs中的属性部分：

属性

这些属性可以应用于任何根标签组件标签： md-tab-group, md-router-tabs, md-tab-bar, md-tab-outlet

[barPosition] - string - 告诉标签组件在哪里定位选项卡标题 - 选项：top、bottom

[alignTabs] - string - 告诉标签组件如何对齐标签 - 选项： start、end、center、stretch

编辑#1

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

编辑#2

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

【讨论】：

我尝试使用 [barPosition]="bottom" 并收到以下错误：模板解析错误：无法绑定到 'barPosition'，因为它不是 'md- 的已知属性选项卡组'。
感谢您的回复。不，我没有使用 Ionic。如果我成功了，我会尝试找到解决方案并在此处发布。