角度材料mdTabs:是否可以有垂直标签？

Question

我正在寻找从上到下显示的标签,左侧是标签导航.无论如何,这可以在Angular Material库中实现吗？

Answer 1

Rahul Sagore的这个 codepen使用普通材质，不是专门用于 Angular，但它正是您想要的。我一直在寻找和你一样的东西；很遗憾 Material 没有提供此功能，但我可以看到这会违背他们的原则并使 Material 过于广泛。

它由自定义 css（也许是覆盖性的，我不确定）和特定材质类名的使用组成。下面我将内容粘贴到一个片段中。

我对这些类有疑问mdl-cell--n-col，因此我将内容从 更改10-col为6-col，这样它就不会将内容包含在这篇文章的限制性空间中的选项卡下方。您可能需要自己修改它，或者放弃它并按照您知道的方式使用材质样式。同样，我看不到什么.hollow-circle跨度正在做什么，所以也许不需要它们。

/*Vertical Tabs*/
.vertical-mdl-tabs {
    margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: 35px;
    height: inherit;
    border-bottom: none;
    border-right: 1px solid rgba(10, 11, 49, 0.20);
}

.vertical-mdl-tabs .mdl-tabs__tab {
    width: 100%;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    letter-spacing: 2px;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
    border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    content: inherit;
    height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
    padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
    text-align: left;
}

<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-grid mdl-grid--no-spacing">
      <div class="mdl-cell mdl-cell--2-col">
          <div class="mdl-tabs__tab-bar">
             <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                 <span class="hollow-circle"></span>
                  Tab 1
             </a>
             <a href="#tab2-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 2
              </a>
              <a href="#tab3-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 3
              </a>
         </div>
       </div>
       <div class="mdl-cell mdl-cell--6-col">
            <div class="mdl-tabs__panel is-active" id="tab1-panel">
                 Content 1
            </div>
            <div class="mdl-tabs__panel" id="tab2-panel">
                 Content 2
            </div>
            <div class="mdl-tabs__panel" id="tab3-panel">
                  Content 3
            </div>
        </div>
    </div>
</div>