две вкладки вертикальная и горизонтальная - не работают вкладки мат - PullRequest
Новая
       40

две вкладки вертикальная и горизонтальная - не работают вкладки мат

0 голосов
/ 17 февраля 2020

Я смог создать вертикальную вкладку материала с моим кодом ниже, но я хочу, чтобы он находился внутри вертикальной вкладки, мне нужна горизонтальная вкладка

Когда я попытался использовать код ниже, показанный на вертикальных вкладках Вот мой код и здесь это мой 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 ссылка

1 Ответ

2 голосов
/ 18 февраля 2020

Этого можно добиться, вложив 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;
        }
    }
}

Рабочий стекблиц здесь

...