Tabs

[giuseppe-santoro]

Comportamento atteso

Realizzare una componente di navigazione a Tab con lo stile di Design UI Kit

Tabs Bootstrap Italia

Possibili soluzioni

Creare una componente Angular che rispecchi l'esempio di utilizzo seguente:

<it-tab-group [pill]="isPill" [dark]="isDark" (selectedIndexChange)="doSomethingOnChange($event)">
    <it-tab [label]="label1" [icon]="icon1" [disabled]="isDisabled1">Contenuto1</it-tab>
    <it-tab [label]="label2" [icon]="icon2" [disabled]="isDisabled2">Contenuto2</it-tab>
</it-tab-group>

<it-tab-group> è la direttiva che identifica un gruppo di tab e può avere i seguenti parametri:

• pill (opzionale, default false) se presente indica che gli header delle tab saranno stilizzati come dei pulsanti arrotondati. Accetta una espressione booleana o può essere usato come attributo senza valore
• dark (opzionale, default false) se presente indica che il gruppo di tab utilizza il tema di colorazione scura. Accetta una espressione booleana o può essere usato come attributo senza valore

<it-tab> è la componente che identifica la singola tab del gruppo e al suo interno presenta l'html del contenuto. Accetta i seguenti parametri:

• label il testo da visualizzare nell'header della tab
• icon l'icona da visualizzare nell'header della tab
• disabled (opzionale, default false) se il tab in questione è disabilitato. Accetta una espressione booleana o può essere usato come attributo senza valore

Eventi

Il componente <it-tab-group> emette il seguente evento:

• selectedIndexChange: scatenato quando avviene il cambio di tab e chiamato con l'indice del tab che è stato selezionato.