Как я могу отрегулировать ширину группы вкладок мат, чтобы разместить несколько вкладок мат на верхней панели? - PullRequest
Новая
       43

Как я могу отрегулировать ширину группы вкладок мат, чтобы разместить несколько вкладок мат на верхней панели?

0 голосов
/ 28 апреля 2020

Я работаю над проектом Angular и использую вкладки mat для отображения некоторых визуализированных данных на странице html. Теперь проблема, с которой я сталкиваюсь, состоит в том, что у меня есть всего 8 вкладок, и она не помещается на панели при просмотре на экране ноутбука. Он использует нумерацию страниц, чтобы я мог просматривать другие вкладки, которые не подходят к экрану. Если я отключу нумерацию страниц, то из 8 отображаются только 5 вкладок. У меня есть какой-либо способ стилизации, чтобы можно было отобразить оставшиеся столбцы. Прикрепите скриншот того, как я ожидаю, что вкладки будут отображаться. Любая помощь будет очень полезна. С уважением

HTML Часть 

<mat-tab-group  [disableRipple]='true' >
    <mat-tab label="Overall Status Rollup" class="w3-bar w3-black" style="width: 5%;" >
      <div *ngIf="project | async as project; else loading;">
        <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
        <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-2'].synopsis"></div>
      </div>
        <ng-template #loading>Loading User Data...</ng-template>
    </mat-tab>
    <mat-tab label="Test Infrastructure & Software">
        <div *ngIf="project | async as project; else loading;">
          <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
          <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-9'].synopsis"></div>
        </div>
        <ng-template #loading>Loading User Data...</ng-template>
    </mat-tab>
    <mat-tab label="Product Assurance">
      <div *ngIf="project | async as project; else loading;">
        <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
        <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-14'].synopsis"></div>
      </div>
      <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>
  <mat-tab label="Test Architecture & Framework">
    <div *ngIf="project | async as project; else loading;">
      <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
      <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-17'].synopsis"></div>
    </div>
    <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>
  <mat-tab label="Factory Quality & Test">
    <div *ngIf="project | async as project; else loading;">
      <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
      <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-30'].synopsis"></div>
    </div>
    <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>
  <mat-tab label="UDX Roll-up">
    <div *ngIf="project | async as project; else loading;">
      <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
      <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-726'].synopsis"></div>
    </div>
    <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>
  <mat-tab label="EOS Roll-up">
    <div *ngIf="project | async as project; else loading;">
      <div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
      <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-727'].synopsis"></div>
    </div>
    <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>
  <mat-tab label="Data & Project Management">
    <div *ngIf="project | async as project; else loading;">
      <div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-1023'].synopsis"></div>
    </div>
    <ng-template #loading>Loading User Data...</ng-template>
  </mat-tab>

  </mat-tab-group>

CSS Часть 

::ng-deep.mat-tab-header {
    background-color: black;
  }
  ::ng-deep.mat-ripple {
    color: rgb(5, 214, 5);
    font-weight: 700;
  }
  ::ng-deep.mat-tab-link,
  ::ng-deep.mat-tab-label,
  ::ng-deep.mat-tab-label-active {
    max-width: 13%;
  }
  ::ng-deep.mat-tab-header-pagination {
    display: none !important;
  }

Это то, что я хочу Expected

Вот что я получаю Actual

1 Ответ

0 голосов
/ 28 апреля 2020

Просто добавьте это в свой основной css файл: 

.mat-tab-links {
  flex-flow: wrap;
}

Вот репродукция на Stackblitz - упаковка мат-вкладок-ссылок

Цветная нижняя панель не работает должным образом, но я не думаю, что есть другой способ сделать это Вы можете отключить его и создать собственный эффект для каждой ссылки или создать еще одну вкладку mat под первой.

[Редактировать] Вот предварительный просмотр стекаблица :

Stackblitz preview

...