Question

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

Answer 1

This codepen Rahul Sagore使用vanilla材料，不是专门用于Angular，但它正是您想要的。我一直在寻找与你相同的东西;这是一种耻辱材料不提供这一点，但我可以看出它会违背他们的原则并使材料过于广泛。

它包含自定义css（可能是重写，我不确定）和使用特定的Material类名。下面我将内容粘贴到一个片段中。

我遇到了mdl-cell--n-col类的问题，因此我将内容从10-col更改为6-col，因此它不会将内容包含在此限制空间中的标签下帖子。你可能不得不自己修补它，或者废弃它并按照你知道的方式使用Material样式。同样，我看不出.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>

Answer 2

通过将垂直属性添加到mat-tab-group并在页面中添加以下CSS，可以拥有垂直标签。

mat-tab-group[vertical] .mat-tab-labels {
    display: flex;
    flex-direction: column!important;
}

mat-tab-group[vertical] {
    display: flex;
    flex-direction: row!important;
}

这是具有垂直属性的mat-tab-group元素

<mat-tab-group flex="1" vertical>
  <mat-tab label="Tab 1">  Loading ... </mat-tab>
  <mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>

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

2 个答案: