Fundação - Grupo de Botões Referência SASS

Descrição

Você pode alterar os estilos dos componentes usando a Referência SASS.

Variáveis

A tabela a seguir lista as variáveis SASS no arquivo de configurações do projeto que faz com que os estilos padrão do componente sejam personalizados.

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$buttongroup-margin Representa a margem para grupos de botões.	Número	1rem
2	$buttongroup-spacing Representa a margem entre todos os botões no grupo de botões.	Fronteira	1px
3	$buttongroup-child-selector Ele representa o seletor para os botões em um grupo de botões.	Corda	'.botão'
4	$buttongroup-expand-max Representa botões máximos que podem estar em grupos de botões com largura uniforme.	Número	6

Mixins

Para construir a saída CSS final deste componente, os seguintes mixins podem ser usados. Para construir sua própria estrutura de classes usando componentes Foundation, você mesmo pode usar os mixins.

grupo de botões

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

Ele adiciona estilos para um contêiner de grupo de botões. A tabela a seguir lista os parâmetros usados para esse propósito.

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$child-selector Ele representa o seletor para os botões em um grupo de botões.	Corda	$ buttongroup-child-selector

botão-grupo-expandir

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

Um grupo de botões de largura total é criado, o que torna todos os botões de largura igual. Ele usa parâmetros, que estão listados na tabela a seguir.

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$count Representa o número de botões dentro do grupo de botões. Configurá-lo como automático irá gerar CSS que considera muitos números de botões.	Palavra-chave ou número	auto
2	$selector Representa o seletor para os botões em um grupo de botões.	Corda	$ buttongroup-child-selector

pilha-grupo-botão

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

Ele empilha os botões em um grupo. A tabela a seguir lista os parâmetros usados para esse propósito.

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$selector Representa o seletor para os botões em um grupo de botões.	Corda	$ buttongroup-child-selector

botão-grupo-desempilhar

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

Ele desempilha os botões em um grupo. A tabela a seguir lista os parâmetros usados para esse propósito.

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$selector Representa o seletor para os botões em um grupo de botões.	Corda	$ buttongroup-child-selector

↰ Previous page