Не использовать вкладку как активную вкладку по умолчанию - PullRequest
Новая
       23

Не использовать вкладку как активную вкладку по умолчанию

0 голосов
/ 17 декабря 2018

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

В настоящее время первая вкладка активна при загрузке.Я попытался установить selectedIndex="null", но не сработало.Также мне нужно сбросить выбранную вкладку по нажатию кнопки.

Search using mat tab

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Что я чувствую, если вы не хотите визуализировать какой-либо контент вкладок изначально или если он был нажат.Вы можете скрыть содержимое, пока не будет нажата панель вкладок.Как показано ниже:

.HTML 

<mat-tab-group (selectedTabChange)="onTabPanelClick($event, $event.tab)">

        <mat-tab label="First-Tab">
          <div class="col-md-12" *ngIf="isFirstTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Second-tab">
          <div class="col-md-12" *ngIf="isSecondTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Third-tab">
          <div class="col-md-12" *ngIf="isThirdTabVisible">
          </div>
        </mat-tab>

</mat-tab-group>

.ts 

onTabPanelClick(event, tab) {
   this.isFirstTabVisible= (event.index === 0) ? true : false;
   this.isSecondTabVisible= (event.index === 1) ? true : false;
   this.isThirdTabVisible= (event.index === 2) ? true : false;
}
0 голосов
/ 17 декабря 2018

В текущей версии API нет предопределенной опции отмены выбора всех вкладок, поскольку подразумевается, что хотя бы одна вкладка должна быть активной.Но есть небольшой обходной путь (и это кажется довольно хорошим ИМХО): мы можем добавить еще одну вспомогательную вкладку с индексом 0, оставить ее пустой (без содержимого) и скрыть ее с помощью display: none.Таким образом, у вас есть дополнительная невидимая вкладка, и у вас все еще есть возможность перейти на эту вкладку, которая выглядит довольно близко к отмене выбора всех вкладок.

Вы можете достичь этого с помощью всего нескольких строк HTML / CSS.

HTML: 

<button (click)="tabs.selectedIndex = 0">RESET</button>
<mat-tab-group #tabs>
  <mat-tab></mat-tab> <!-- ADDITIONAL TAB -->
  <mat-tab label="First">
    <p>Content 1</p>
  </mat-tab>
  <mat-tab label="Second">
    <p>Content 2</p>
  </mat-tab>
  <mat-tab label="Third">
    <p>Content 3</p>
  </mat-tab>
</mat-tab-group>

CSS: 

::ng-deep .mat-tab-labels > .mat-tab-label:first-child {
  display: none;
}

А вот рабочий STACKBLITZ , вы можете увидеть его в действии.

...