Spacer
Componente auxiliar utilizado para adicionar paddings e margins seguindo o padrão de tokens do Cuida.
Quando usar
- No caso de determinado componente ou elemento da interface precisar apenas de espaçamento (padding ou margin) como modificar de estilo.
Quando não usar
- Nos casos em que determinado componente precisar de vários modificadores de estilo. Pra esses casos utilize classes e nelas inclua paddings e margins com os tokens de espaçamento do Cuida.
Observações:
- ⚠️ Dê preferência sempre que possível à utilização dos tokens em detrimento ao Spacer.
- O valor mandado para as props do Spacer é sempre multiplicado por 4, assim como nos tokens scss do Cuida.
- O valor máximo aceito é 12.
- O spacer não implementa margins e paddings negativos.
Uso
js
<CdsSpacer padding="4">
Conteúdo
</CdsSpacer>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
padding | number|string | 0 | -- | |
paddingTop | number|string | 0 | -- | |
paddingRight | number|string | 0 | -- | |
paddingBottom | number|string | 0 | -- | |
paddingLeft | number|string | 0 | -- | |
margin | number|string | 0 | -- | |
marginTop | number|string | 0 | -- | |
marginRight | number|string | 0 | -- | |
marginBottom | number|string | 0 | -- | |
marginLeft | number|string | 0 | -- |
Slots
Nome | Descrição |
|---|---|
#default | Slot default. |