ipsos-components/src/demo-app/tabs/tabs-demo.html

Material Design components for Angular

<h1>Tab Nav Bar</h1>

<button mat-button (click)="tabLinks.shift()">Remove tab</button>
<button mat-button (click)="swapTabLinks()">Swap first two</button>
<button mat-button (click)="addToLabel()">Add to labels</button>
<button mat-button (click)="toggleBackground()">Toggle background</button>

<div class="demo-nav-bar">
  <nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
    <a mat-tab-link
       *ngFor="let tabLink of tabLinks; let i = index"
       [routerLink]="tabLink.link"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive">
      {{tabLink.label}}
    </a>
    <a mat-tab-link disabled>Disabled Link</a>
  </nav>
  <router-outlet></router-outlet>
</div>


<h1>Tab Group Demo - Dynamic Tabs</h1>

<div>
  Selected tab index:
  <mat-form-field>
    <input matInput type="number" [(ngModel)]="activeTabIndex">
  </mat-form-field>
</div>

<div class="demo-dynamic-tabs">
  <mat-card>
    <mat-card-title>Add New Tab</mat-card-title>
    <mat-card-content>
      <mat-checkbox [(ngModel)]="createWithLongContent">
        Include extra content
      </mat-checkbox>
      <mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
        Select after adding
      </mat-checkbox>
      <div>
        Position:
        <mat-form-field>
          <input matInput type="number" [(ngModel)]="addTabPosition">
        </mat-form-field>
      </div>
      <button mat-raised-button color="primary"
              (click)="addTab(createWithLongContent)">
        Add
      </button>
    </mat-card-content>
  </mat-card>

  <mat-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
    <mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
      <ng-template mat-tab-label>{{tab.label}}</ng-template>
      <div class="tab-content">
        {{tab.content}}
        <br>
        <br>
        <div *ngIf="tab.extraContent">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
          orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
          gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
          diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
          ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
          venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
          Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
          orci posuere, nec luctus mauris semper.
          <br>
          <br>
          Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
          magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
          Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
          Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
          tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
          nisl consectetur, rhoncus sapien sit amet, tempus sapien.
          <br>
          <br>
          Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
          molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
          at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
          Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
        </div>
        <br>
        <br>
        <mat-form-field>
          <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
        </mat-form-field>
        <br><br>
        <button mat-raised-button
                [disabled]="dynamicTabs.length == 1"
                (click)="deleteTab(tab)">
          Delete Tab
        </button>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

<h1>Tab Group Demo - Dynamic Height</h1>

<mat-tab-group class="demo-tab-group" dynamicHeight>
  <mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>
    <div class="tab-content">
      {{tab.content}}
      <br>
      <br>
      <div *ngIf="tab.extraContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
        Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
        In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
        feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
        orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
        gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
        diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
        ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
        venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
        Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
        orci posuere, nec luctus mauris semper.
        <br>
        <br>
        Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
        magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
        Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
        Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
        tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
        nisl consectetur, rhoncus sapien sit amet, tempus sapien.
        <br>
        <br>
        Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
        molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
        at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
        Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
      </div>
      <br>
      <br>
      <mat-form-field>
        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
      </mat-form-field>
    </div>
  </mat-tab>
</mat-tab-group>


<h1>Tab Group Demo - Fixed Height</h1>

<mat-tab-group class="demo-tab-group" style="height: 220px">
  <mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>
    <div class="tab-content">
      {{tab.content}}
      <br>
      <br>
      <div *ngIf="tab.extraContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
        Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
        In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
        feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
        orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
        gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
        diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
        ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
        venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
        Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
        orci posuere, nec luctus mauris semper.
        <br>
        <br>
        Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
        magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
        Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
        Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
        tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
        nisl consectetur, rhoncus sapien sit amet, tempus sapien.
        <br>
        <br>
        Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
        molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
        at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
        Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
      </div>
      <br>
      <br>
      <mat-form-field>
        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
      </mat-form-field>
    </div>
  </mat-tab>
</mat-tab-group>

<h1>Stretched Tabs</h1>

<mat-tab-group class="demo-tab-group" style="height: 200px" mat-stretch-tabs>
  <mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>
    <div class="tab-content">
      {{tab.content}}
    </div>
  </mat-tab>
</mat-tab-group>


<h1>Async Tabs</h1>

<mat-tab-group class="demo-tab-group">
  <mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>

    <div class="tab-content">
      {{tab.content}}
      <br>
      <br>
      <br>
      <mat-form-field>
        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
      </mat-form-field>
    </div>
  </mat-tab>
</mat-tab-group>

<!-- Simple tabs api -->
<h1>Tabs with simplified api</h1>
<mat-tab-group class="demo-tab-group">
  <mat-tab label="Earth">
    <div class="tab-content">
      This tab is about the Earth!
    </div>
  </mat-tab>
  <mat-tab label="Fire">
    This tab is about combustion!
  </mat-tab>
</mat-tab-group>

<h1>Inverted tabs</h1>
<mat-tab-group class="demo-tab-group" headerPosition="below">
  <mat-tab label="Earth">
    <div class="tab-content">
      This tab is about the Earth!
    </div>
  </mat-tab>
  <mat-tab label="Fire">
    <div class="tab-content">
      This tab is about combustion!
    </div>
  </mat-tab>
</mat-tab-group>

<h1>Accent tabs</h1>
<mat-tab-group class="demo-tab-group" color="accent">
  <mat-tab label="Earth">
    <div class="tab-content">
      This tab is about the Earth!
    </div>
  </mat-tab>
  <mat-tab label="Fire">
    <div class="tab-content">
      This tab is about combustion!
    </div>
  </mat-tab>
</mat-tab-group>

<h1>Tabs with background color</h1>
<mat-tab-group class="demo-tab-group" backgroundColor="primary" color="accent">
  <mat-tab label="Earth">
    <div class="tab-content">
      This tab is about the Earth!
    </div>
  </mat-tab>
  <mat-tab label="Fire">
    <div class="tab-content">
      This tab is about combustion!
    </div>
  </mat-tab>
</mat-tab-group>

<h1>Tabs with autosize textarea</h1>
<mat-tab-group class="demo-tab-group">
  <mat-tab label="Tab 1">
    <div class="tab-content">
      <mat-form-field>
        <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
      </mat-form-field>
    </div>
  </mat-tab>
</mat-tab-group>