kalidea/kaligraphi

<h1>Tabs</h1>

<div class="example">
  <kal-tab-group tabIndex="1" [formControl]="formControl">
    <kal-tab>
      <ng-template kalTabLabel>
        Label 1
      </ng-template>
      <h5>Tab1</h5>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nesciunt possimus quaerat veritatis. Aliquid
      consequuntur eaque enim ipsa, laudantium nam nisi praesentium quaerat quibusdam! At commodi eum mollitia porro
      reprehenderit!
    </kal-tab>

    <kal-tab *ngIf="showTab">
      <ng-template kalTabLabel>
        <kal-icon>done</kal-icon>
        Label 2
      </ng-template>
      <h5>Tab2</h5>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nesciunt possimus quaerat veritatis. Aliquid
      consequuntur eaque enim ipsa, laudantium nam nisi praesentium quaerat quibusdam! At commodi eum mollitia porro
      reprehenderit!
    </kal-tab>

    <kal-tab>
      <ng-template kalTabLabel>
        <kal-icon>star</kal-icon>
        Label 3
      </ng-template>
      <h5>Tab3</h5>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nesciunt possimus quaerat veritatis. Aliquid
      consequuntur eaque enim ipsa, laudantium nam nisi praesentium quaerat quibusdam! At commodi eum mollitia porro
      reprehenderit!
    </kal-tab>

  </kal-tab-group>
</div>

<div class="configurator">
  <kal-button (click)="changeTab()">Change tab</kal-button>
  <kal-button (click)="toggleTab()">Toggle tab</kal-button>
</div>