Fondation - Table de référence Sass

Variables

Vous pouvez modifier les styles des composants à l'aide des variables SASS suivantes, comme indiqué dans le tableau.

N ° Sr. Nom et description Type Valeur par défaut
1

$table-background

Applique la couleur d'arrière-plan du tableau.

 Couleur $ blanc
2

$table-color-scale

Il spécifie l'échelle pour assombrir les lignes et la bordure du tableau rayé.

 Nombre 5%
3

$table-border

Il définit le style de la bordure du tableau.

 liste Échelle intelligente solide 1px ($ table-background, $ table-color-scale)
4

$table-padding

Il fournit le rembourrage de la table.

 Nombre rem-calc (8 10 10)
5

$table-hover-scale

Il spécifie l'échelle pour assombrir les lignes du tableau rayé au survol.

 Nombre 2%
6

$table-row-hover

Applique la couleur des lignes standard au survol.

 liste assombrir ($ table-background, $ table-hover-scale)
sept

$table-row-stripe-hover

Applique la couleur des lignes rayées au survol.

 liste assombrir ($ table-background, $ table-color-scale + $ table-hover-scale)
8

$table-striped-background

Il fournit la couleur d'arrière-plan des lignes rayées.

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

$table-stripe

Il montre la bande sur les lignes du tableau. Si une ligne est paire, les lignes paires auront une couleur d'arrière-plan et si une ligne est impaire, les lignes impaires auront une couleur d'arrière-plan. Si la ligne est vide ou toute autre valeur, les lignes du tableau n'auront pas de bandes.

 Keyoword même
dix

$table-head-background

Il spécifie la couleur de l'arrière-plan de l'en-tête.

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

$table-foot-background

Il spécifie la couleur de l'arrière-plan du pied de page.

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

$table-head-font-color

Il définit la couleur de police d'un en-tête.

 Couleur $ body-font-color
13

$show-header-for-stacked

Il montre la valeur par défaut de l'en-tête lors de l'utilisation de tables empilées.

 Booléen faux

Mixins

Vous pouvez utiliser les mixins pour créer la structure de classe CSS pour vos composants comme décrit ci-dessous -

table

Il ajoute des styles pour les tableaux et les styles peuvent être inclus en utilisant le mixin suivant -

@include table($stripe);

Il utilise le paramètre tel que défini dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$stripe

Il montre la bande sur les lignes du tableau en utilisant une valeur paire, impaire ou aucune. Même est la valeur par défaut.

 Mot-clé $ table-rayure

tableau de défilement

Il fait défiler le tableau horizontalement en utilisant le mixin suivant -

@include table-scroll;

table-hover

Il survole les lignes du tableau en utilisant le mixin suivant -

@include table-hover;

table-pile

Il ajoute des styles pour la table empilée.

@include table-stack($header);

Il utilise le paramètre tel que défini dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$header

Il montre l'en-tête lorsque la table est empilée.

 Booléen $ show-header-pour-stacked