垂直和水平两个标签 - 垫标签不起作用

Question

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

当我尝试使用以下代码时，它们都显示在垂直选项卡中这是我的代码，这是我的 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>

这里是 stackblitz link

Answer 1

您可以通过嵌套 mat-tab-group、根据方向指定垂直和水平类并相应地调整 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;
        }
    }
}

工作 stackblitz here

垂直和水平两个标签 - 垫标签不起作用

two tabs vertical & horizontal - Not working Mat tabs

angular-material

angular

mat-tab

angular8