Foundation - Tabs Sass Reference
Variabili
È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS elencate nella tabella.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $tab-margin Imposta il margine per la barra delle schede. |
Numero | 0 |
| 2 | $tab-background Visualizza il colore di sfondo di una barra delle schede. |
Colore | $ bianco |
| 3 | $tab-background-active Visualizza il colore di sfondo attivo di una barra delle schede. |
Colore | $ grigio chiaro |
| 4 | $tab-border Specifica il colore del bordo per una scheda. |
Colore | $ grigio chiaro |
| 5 | $tab-item-color Visualizza il colore del testo per le voci di menu. |
Colore | primo piano ($ tab-background, $ primary-color) |
| 6 | $tab-item-background-hover Visualizza il colore di sfondo per gli elementi al passaggio del mouse. |
$ bianco | |
| 7 | $tab-item-padding Definisce il riempimento di un elemento della scheda. |
Numero | 1.25rem 1.5rem |
| 8 | $tab-expand-max Include il numero massimo di classi expand-n nel CSS. |
Numero | 6 |
| 9 | $tab-content-background Visualizza il colore di sfondo del contenuto della scheda. |
Colore | $ bianco |
| 10 | $tab-content-border Visualizza il colore del bordo del contenuto della scheda. |
Colore | $ grigio chiaro |
| 11 | $tab-content-color Fornisce il colore del testo del contenuto della scheda. |
Colore | primo piano ($ tab-background, $ primary-color) |
| 12 | $tab-content-padding Definisce il riempimento per il contenuto della scheda. |
Numero o elenco | 1rem |
Mixins
Puoi usare i mixin per costruire la struttura della classe CSS per i tuoi componenti modali di rivelazione.
tabs-container
Puoi includere stili per un contenitore di schede utilizzando il seguente mixin:
@include tabs-container;tabs-container-vertical
Visualizza le schede in modo verticale utilizzando il seguente mixin:
@include tabs-container-vertical;tabs-title
Applica gli stili per i collegamenti delle schede utilizzando il seguente mixin:
@include tabs-title;tabs-content
Applica gli stili per i riquadri dei contenuti delle schede utilizzando il seguente mixin:
@include tabs-content;tabs-content-vertical
Specifica la scheda, il contenuto deve essere visualizzato, in modo verticale utilizzando il seguente mixin:
@include tabs-content-vertical;pannello a schede
È possibile includere stili per un pannello dei contenuti a schede utilizzando il seguente mixin:
@include tabs-panel;