Box
Boxes são componentes básicos de container que encapsulam conteúdo com o estilo padrão de borda, de sombra e de padding do cuida. Podem ser utilizados como componente primivo para cards, popovers, modais, etc.
Uso
js
<CdsBox
:elevated="false"
>
2
</CdsBox>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
elevated | boolean | false | -- | Quando true aplica o token $shadow-sm como box-shadow do componente. |
fluid | boolean | false | -- | Indica se o componente deverá ocupar 100% da largura disponível. |
verticalFluid | boolean | false | -- | Indica se o componente deverá ocupar 100% da altura disponível. |
padding | number|string | 4 | -- | O valor setado é sempre multiplicado por 4, assim como nos tokens scss do Cuida. O valor mínimo aceito é 4 e o máximo aceito é 12. |
clickable | boolean | false | -- | Ativa ou desativa o clique no componente |
variant | string | 'gray' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
light | boolean | false | -- | Aplica uma versão mais suave da variante de cor. |
overflowVisible | boolean | false | -- | Quando true, oculta o overflow do componente. |
Eventos
Nome | Descrição |
|---|---|
@boxClick | Evento emitido quando a prop `clickable` é `true` e o `Box` é clicado. |
Slots
Nome | Descrição |
|---|---|
#default | Slot utilizado para renderização do conteúdo interno do Box. |