Angular Material mdTabs：是否可以有垂直选项卡？

Question

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

Answer 1

这个 codepen 由 Rahul Sagore 使用普通材质，不是专门用于 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>

Answer 2

您可以通过向 mat-tab-group 添加垂直属性并向页面添加以下 css 来拥有 verticval 选项卡。

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>

Answer 3

有关 @reza-abolfathi 答案的 Angular 15+ 的更新 CSS 代码：

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

  .mat-mdc-tab-labels {
    flex-direction: column !important;
  }

  .mat-mdc-tab-body-wrapper {
    width: 100%;
  }
}