Layout

Collapsible

Container com conteúdo que pode ser expandido/recolhido.

Uso

Use o elemento <y-collapsible> no seu HTML:

html
<y-collapsible>  <y-button slot="trigger">Mostrar mais</y-button>  <div>Conteúdo oculto revelado</div></y-collapsible>

Exemplos

Padrão

Padrão

Propriedades

PropriedadeTipoPadrãoDescrição
openbooleanfalseEstado expandido

Importação

Importe todos os componentes ou apenas este:

typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/collapsible.js';

Acessibilidade

  • Suporta navegação por teclado
  • Utiliza atributos ARIA apropriados
  • focus-visible para indicação de foco