Fondazione - Riferimento tabella Sass

Variabili

È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS elencate nella tabella.

Sr.No. Nome e descrizione genere Valore predefinito
1

$table-background

Applica il colore di sfondo per la tabella.

 Colore $ bianco
2

$table-color-scale

Specifica la scala per scurire le righe e il bordo della tabella a strisce.

 Numero 5%
3

$table-border

Definisce lo stile per il bordo della tabella.

 Elenco Scala intelligente solida 1px ($ table-background, $ table-color-scale)
4

$table-padding

Fornisce imbottitura del tavolo.

 Numero rem-calc (8 10 10)
5

$table-hover-scale

Specifica la scala per scurire le righe della tabella a strisce al passaggio del mouse.

 Numero 2%
6

$table-row-hover

Applica il colore per le righe standard al passaggio del mouse.

 Elenco darken ($ table-background, $ table-hover-scale)
7

$table-row-stripe-hover

Applica il colore per le righe a strisce al passaggio del mouse.

 Elenco scurisci ($ table-background, $ table-color-scale + $ table-hover-scale)
8

$table-striped-background

Fornisce il colore di sfondo per le righe a strisce.

 Colore smart-scale ($ table-background, $ table-color-scale)
9

$table-stripe

Mostra la striscia sulle righe della tabella. Se una riga è pari, le righe pari avranno un colore di sfondo e se una riga è dispari, le righe dispari avranno un colore di sfondo. Se la riga è vuota o qualsiasi altro valore, le righe della tabella non avranno strisce.

 Keyoword anche
10

$table-head-background

Specifica il colore dello sfondo dell'intestazione.

 Colore smart-scale ($ table-background, $ table-color-scale / 2)
11

$table-foot-background

Specifica il colore dello sfondo del piè di pagina.

 Colore smart-scale ($ table-background, $ table-color-scale)
12

$table-head-font-color

Definisce il colore del carattere di un'intestazione.

 Colore $ body-font-color
13

$show-header-for-stacked

Mostra il valore predefinito per l'intestazione quando si utilizzano tabelle impilate.

 Booleano falso

Mixins

Puoi utilizzare i mixin per creare la struttura della classe CSS per i tuoi componenti come descritto di seguito:

tavolo

Aggiunge stili per le tabelle e gli stili possono essere inclusi utilizzando il seguente mixin:

@include table($stripe);

Utilizza il parametro come definito nella tabella seguente:

Sr.No. Parametro e descrizione genere Valore predefinito
1

$stripe

Mostra la striscia sulle righe della tabella utilizzando il valore pari, dispari o nessuno. Anche è il valore predefinito.

 Parola chiave $ table-stripe

table-scroll

Scorre la tabella orizzontalmente utilizzando il seguente mixin:

@include table-scroll;

table-hover

Si posiziona sulle righe della tabella utilizzando il seguente mixin:

@include table-hover;

pila da tavolo

Aggiunge stili per il tavolo impilato.

@include table-stack($header);

Utilizza il parametro come definito nella tabella seguente:

Sr.No. Parametro e descrizione genere Valore predefinito
1

$header

Mostra l'intestazione quando la tabella è impilata.

 Booleano $ show-header-for-stacked