材料设计2标签在底部对齐

Question

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

在材质1中可以使用 md-tabs-align =＆＃34;底部＆＃34; 。为此目的，材料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

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

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 2

请参阅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有帮助。

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;
}