Foundation - Référence SASS du groupe de boutons

La description

Vous pouvez modifier les styles des composants à l'aide de la référence SASS.

Variables

Le tableau suivant répertorie les variables SASS du fichier de paramètres du projet qui permettent de personnaliser les styles par défaut du composant.

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$buttongroup-margin Il représente la marge des groupes de boutons.	Nombre	1rem
2	$buttongroup-spacing Il représente la marge entre tous les boutons du groupe de boutons.	Frontière	1px
3	$buttongroup-child-selector Il représente le sélecteur des boutons dans un groupe de boutons.	Chaîne	'.bouton'
4	$buttongroup-expand-max Il représente le nombre maximum de boutons pouvant être dans un groupe de boutons de largeur égale.	Nombre	6

Mixins

Pour créer la sortie CSS finale de ce composant, les mixins suivants peuvent être utilisés. Pour créer votre propre structure de classe à l'aide des composants Foundation, vous pouvez utiliser les mixins vous-même.

groupe de boutons

@include button-group($child-selector);

Il ajoute des styles pour un conteneur de groupe de boutons. Le tableau suivant répertorie les paramètres utilisés à cet effet.

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$child-selector Il représente le sélecteur des boutons dans un groupe de boutons.	Chaîne	$ buttongroup-child-selector

bouton-groupe-développer

@include button-group-expand($count, $selector);

Un groupe de boutons pleine largeur est créé, ce qui donne à chaque bouton une largeur égale. Il utilise des paramètres répertoriés dans le tableau suivant.

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$count Représente le nombre de boutons dans le groupe de boutons. Le définir sur auto , générera du CSS qui prend en compte un grand nombre de boutons.	Mot-clé ou numéro	auto
2	$selector Représente le sélecteur des boutons d'un groupe de boutons.	Chaîne	$ buttongroup-child-selector

bouton-groupe-pile

@include button-group-stack($selector);

Il empile les boutons dans un groupe. Le tableau suivant répertorie les paramètres utilisés à cet effet.

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$selector Représente le sélecteur des boutons d'un groupe de boutons.	Chaîne	$ buttongroup-child-selector

bouton-groupe-dépilage

@include button-group-unstack($selector);

Il désempile les boutons dans un groupe. Le tableau suivant répertorie les paramètres utilisés à cet effet.

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$selector Représente le sélecteur des boutons d'un groupe de boutons.	Chaîne	$ buttongroup-child-selector