List Divider

Função

A molécula foi desenhada para ser um elemento separador em uma lista de elementos.

Estrutura básica

Espaçamentos

1. LeftMargin, como Margem Lateral Esquerda
2. RightMargin, como Margem Lateral Direita

Átomos

3. Átomo Divider

Prop-Token Mapping

Props da Molécula

Prop	Token	Default Value	Use
leftMargin	SpacingMarginal	16	1
rightMargin	SpacingMarginal	16	2
dividerBaseProps	-	-	3

DividerBaseProps

Prop	Token	Default Value
heignt	HeightDividerRegular	1
color	ColorSurfaceLightNeutral	#9E9E9E

Conteúdo

A molécula não possui conteúdo populável.

Variação Complementary

Tem a mesma função da molécula original, mas aplicado numa tela com fundo ColorPrimary.

São feitas as seguintes alterações de Token nas DividerBaseProps:

Prop	Token	Default Value
color	ColorSurfaceLightNeutral ⇒ ColorComplementary	#FFFFFF

Estados

Molécula não possui estados.

Tipos e Casos de Uso

Existem três variações desta molécula: Regular, NoSpacing e LeftSpacing

1. Regular

É a molécula padrão já apresentada nos itens anteriores deste documento.

2. No Spacing

É o tipo ilustrado na linha 2. Apresenta a seguinte variação de tokens:

Prop	Token	Default Value
leftMargin	SpacingMarginal ⇒ 0	-
rightMargin	SpacingMarginal ⇒ 0	-

3. Left Spacing

É o tipo ilustrado na linha 3. Apresenta a seguinte variação de tokens:

Prop	Token	Default Value
leftMargin	SpacingMarginal ⇒ SpacingWide	64
rightMargin	SpacingMarginal ⇒ 0	-

Responsividade

Tamanho da Tela

Quando se reduz o tamanho da tela, o Átomo Divider diminui junto, mantendo-se fixos as Margens Laterias.