如何垂直对齐角度材料标签？

Posted 2023-03-05

【中文标题】如何垂直对齐角度材料标签？

【英文标题】：how to alignment angular material tab vertically?

【发布时间】：2017-02-25 10:13:23

【问题描述】：

我在当前项目中使用了角材料，但在使用角材料选项卡时遇到了一个问题。我想垂直使用这个选项卡，但它不能正常工作。就像对齐刚刚中断，它无法正常工作。任何人都可以给我一个合适的解决方案我怎样才能垂直固定这个有角度的材料标签？

html 代码：

 <md-content class="md-padding" >
                    <md-tabs class="md-accent" md-selected="data.selectedIndex" layout="row">
                      <md-tab id="tab1" >
                        <md-tab-label>Item One</md-tab-label>
                        <md-tab-body>
                          View for Item #1 <br/>
                          data.selectedIndex = 0;
                        </md-tab-body>
                      </md-tab>
                      <md-tab id="tab3">
                        <md-tab-label>Item Three</md-tab-label>
                        <md-tab-body>
                          View for Item #3 <br/>
                          data.selectedIndex = 2;
                        </md-tab-body>
                      </md-tab>
                      <md-tab id="tab3">
                        <md-tab-label>Item Three</md-tab-label>
                        <md-tab-body>
                          View for Item #3 <br/>
                          data.selectedIndex = 2;
                        </md-tab-body>
                      </md-tab>
                    </md-tabs>
                </md-content>

【问题讨论】：

制作一个插件，以便我们看到您的问题

垂直标签没有 Material Design 规范。为什么不使用侧导航？

@roope 我想通过使用角材料来功能性地使用标签。如果没有选择，那么我必须在这里使用 sidenav。 tnx 为你的评论 :)

【参考方案1】：

根据当前版本的材质选项卡可以通过设置属性值放置在顶部和底部。没有设置垂直的选项。

但是有第三方 JS 可以帮助您。

https://angular-ui.github.io/bootstrap/#/tabs