两个垂直和水平选项卡 - 不工作垫选项卡

【问题标题】：two tabs vertical & horizontal - Not working Mat tabs两个垂直和水平选项卡 - 不工作垫选项卡
【发布时间】：2020-02-17 17:02:08
【问题描述】：

我能够使用下面的代码创建垂直材质选项卡，但我想要在垂直选项卡内我需要一个水平选项卡

当我尝试使用下面的代码都显示在垂直选项卡中时，这是我的代码，这是我的 Stackblitz url。

<div class="container">
      <div id="content">
        <div id="main-content">
          <mat-tab-group>
            <mat-tab label="Tab One">
              Tab One Content
            </mat-tab>
            <mat-tab label="Tab Two">
            <mat-tab-group>
            <mat-tab label="First"> Content 1 </mat-tab>
            <mat-tab label="Second"> Content 2 </mat-tab>
            <mat-tab label="Third"> Content 3 </mat-tab>
          </mat-tab-group>
            </mat-tab>
          </mat-tab-group>
        </div>
      </div>
    </div>

这里是堆栈闪电战link

【问题讨论】：

标签： angular angular-material angular8 mat-tab

【解决方案1】：

您可以通过嵌套mat-tab-group's，根据方向指定垂直和水平类并相应地调整 css 来实现：

HTML

<mat-tab-group class="vertical">
  <mat-tab label="Tab One">
    <mat-tab-group class="horizontal">
      <mat-tab label="Sub Tab One">
        Sub Tab One Content
      </mat-tab>
      <mat-tab label="Sub Tab Two">
        Sub Tab Two Content
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Tab Two">
    Tab Two Content
  </mat-tab>
</mat-tab-group>

CSS

  :host {
    /deep/ {
        .mat-tab-group.vertical {
            flex-direction: row;
        }
        .mat-tab-group.horizontal {
            flex-direction: column;
        }
        .vertical .mat-tab-labels {
            flex-direction: column;
        }
        .horizontal .mat-tab-labels {
            flex-direction: row;
        }
    }
}

工作堆栈闪电战here

【讨论】：