Pular para o conteúdo principal

InlineGroup

Base​

Espaçamento entre os itens​

Customizado com números de 1 a 12​

Preencha a propriedade gap com um número de 1 a 12 para definir o espaçamento entre os itens como os tokens de --size-spacing-01 a --size-spacing-12, respectivamente.

Customizado com string​

Utilize a propriedade gap como uma string para passar qualquer valor como espaçamento entre os itens.

Customizado com array​

Preencha a propriedade gap com um array contendo dois itens, sendo cada um deles um número de 1 a 12 ou uma string, para definir, respectivamente, o espaçamento horizontal e vertical entre os itens.

Como um elemento inline​

Utilize a propriedade inline para renderizar o componente como um elemento inline (inline-flex).

Quebra de linha​

Utilize a propriedade lineBreak para permitir que os itens mudem de linha caso ultrapassem o espaço horizontal disponível.

Item fluido​

Utilize a propriedade fluid para expandir um item por todo espaço horizontal disponível.

Alinhamento horizontal​

Utilize a propriedade horizontalAlign para definir o alinhamento horizontal dos itens do componente.

Esquerdo​

Centralizado​

Direito​

Distribuição uniforme​

Alinhamento vertical​

Utilize a propriedade verticalAlign para definir o alinhamento vertical dos itens do componente.

canto superior​

Centralizado​

Canto inferior​

Linha do texto​

Esticado​

Item com alinhamento vertical próprio​

Utilize a propriedade verticalAlign do subcomponente InlineGroup.Item para definir o alinhamento vertical em um item específico.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.