CollapsibleContainer
CollapsibleContainers são componentes utilizados para reduzir o espaço vertical quando há uma grande quantidade de informações, com a possibilidade de ser expandido para exibir o conteúdo sumarizado.
Quando usar:
- For necessário otimizar o espaço vertical.
- Se deseja mostrar itens sumarizados.
- Se possui uma grande quantidade de informações que podem ser agrupadas em um tópico/título.
Quando não usar:
- Houver poucos itens a ser sumarizados;
Uso
js
<CdsCollapsibleContainer>
<p class="p-3">
Mussum Ipsum, cacilds vidis litro abertis. Todo mundo
vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!
Atirei o pau no gatis, per gatis num morreus. Pra lá , depois
divoltis porris, paradis. Leite de capivaris, leite de mula
manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad
litora torquent. Per aumento de cachacis, eu reclamis. Nec
orci ornare consequat. Praesent lacinia ultrices consectetur.
Sed non ipsum felis. Cevadis im ampola pa arma uma pindureta.
</p>
</CdsCollapsibleContainer>Preview
Visualizar mais
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* modelValue (required) | boolean | false | -- | Representa o estado do componente. Quando 'false' o conteúdo não é mostrado e quando 'true' o conteúdo do container é exibido. |
title | string | 'Visualizar mais' | -- | Título do item a ser expandido |
Eventos
Nome | Descrição |
|---|---|
@update:model-value | Evento emitido quando o conteúdo do item é exibido ('true') ou ocultado ('false'). |
Slots
Nome | Descrição |
|---|---|
#title | Slot para renderização do conteúdo do header/title customizado do item |
#default | Slot para renderização conteúdo do container |