Foundation - Riferimento SASS del gruppo di pulsanti

Descrizione

È possibile modificare gli stili dei componenti utilizzando SASS Reference.

Variabili

La tabella seguente elenca le variabili SASS nel file delle impostazioni del progetto che rendono gli stili di default del componente personalizzabili.

Sr.No. Nome e descrizione genere Valore predefinito
1

$buttongroup-margin

Rappresenta il margine per i gruppi di pulsanti.

 Numero 1rem
2

$buttongroup-spacing

Rappresenta il margine tra ogni pulsante nel gruppo di pulsanti.

 Confine 1px
3

$buttongroup-child-selector

Rappresenta il selettore per i pulsanti all'interno di un gruppo di pulsanti.

 Corda '.pulsante'
4

$buttongroup-expand-max

Rappresenta il numero massimo di pulsanti che possono essere nel gruppo di pulsanti con larghezza uniforme.

 Numero 6

Mixins

Per creare l'output CSS finale di questo componente, è possibile utilizzare i seguenti mixin. Per costruire la tua struttura di classe usando i componenti Foundation, puoi usare tu stesso i mixin.

gruppo di pulsanti

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

Aggiunge stili per un contenitore di gruppo di pulsanti. La tabella seguente elenca i parametri utilizzati per questo scopo.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$child-selector

Rappresenta il selettore per i pulsanti all'interno di un gruppo di pulsanti.

 Corda $ buttongroup-child-selector

pulsante-gruppo-espandere

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

Viene creato un gruppo di pulsanti a larghezza intera, che fa sì che ogni pulsante abbia la stessa larghezza. Utilizza i parametri, elencati nella tabella seguente.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$count

Rappresenta il numero di pulsanti all'interno del gruppo di pulsanti. Impostandolo su auto , genererà CSS che considera molti numeri di pulsanti.

 Parola chiave o numero auto
2

$selector

Rappresenta il selettore per i pulsanti all'interno di un gruppo di pulsanti.

 Corda $ buttongroup-child-selector

button-group-stack

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

Impila i pulsanti in un gruppo. La tabella seguente elenca i parametri utilizzati per questo scopo.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$selector

Rappresenta il selettore per i pulsanti all'interno di un gruppo di pulsanti.

 Corda $ buttongroup-child-selector

button-group-unstack

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

Disimpila i pulsanti in un gruppo. La tabella seguente elenca i parametri utilizzati per questo scopo.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$selector

Rappresenta il selettore per i pulsanti all'interno di un gruppo di pulsanti.

 Corda $ buttongroup-child-selector