Collapse

Tipo: Core

DesignersFigmaAinda não disponível
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Collapse oculta ou revela conteúdos secundários em áreas expansíveis. Quando configurado como Accordion em uma lista aninhada, o componente permite a expansão de apenas uma seção por vez, recolhendo automaticamente as demais para manter o foco e a compacidade da interface.

Diretrizes de Comportamento

Comportamento Exclusivo (Accordion): Utilize este modo quando o usuário deve processar informações de forma sequencial ou quando o espaço vertical é crítico.
Foco na Tarefa: Ao expandir uma nova seção no modo Accordion, o sistema deve garantir que o conteúdo revelado esteja visível, ajustando a rolagem se necessário.
Indicação de Estado: Use ícones claros (como > ou v) em Caixa de Título para os cabeçalhos.
Vá Direto ao Ponto: O cabeçalho deve ser autossuficiente. Se o usuário precisar saber o que há dentro antes de abrir, use um resumo curto.
- Exemplo: Dados do Veículo (Placa ABC-1234) em vez de apenas “Dados do Veículo”.

Exemplos de Escrita (Dos & Don’ts)

Contexto Logístico	Estilo Incorreto (Prolixo)	Estilo UX (Conciso/Direto)
Rota de Entrega	Veja aqui todas as paradas da sua rota	Paradas da Rota
Dados da Carga	Informações extras sobre o peso e cubagem	Especificações Técnicas
Histórico	Clique para expandir o histórico de eventos	Histórico de Eventos

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<details class="mds-collapse" >
  <summary class="mds-collapse__header">
    <div class="mds-collapse__header__title">Clique para expandir</div>
    <div class="mds-collapse__header__content">Informação de apoio</div>
    <div class="mds-collapse__header__action"><i data-lucide="chevron-down"></i></div>
  </summary>
  <div class="mds-collapse__body">Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est.</div>
</details>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`variant`	`default` `primary` `secondary`	—
`size`	`sm` `md` `lg`	—
`isOpen`	`true` · `false`	`false`
`useDetails`	`true` · `false`	`true`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-collapse`
Elementos	`.mds-collapse__body` `.mds-collapse__header` `.mds-collapse__header__action` `.mds-collapse__header__content` `.mds-collapse__header__title`
Modificadores	`.mds-collapse--card` `.mds-collapse--collapsed` `.mds-collapse--error` `.mds-collapse--lg` `.mds-collapse--md` `.mds-collapse--pipe-group` `.mds-collapse--sm` `.mds-collapse--xs`

Angular (mds-angular)

Seletor

mds-collapse

O componente de collapse é uma caixa para agrupar o conteúdo que pode ser recolhido ou expandido

Inputs

Input	Tipo	Padrão	Descrição
`collapsed` ⇄	`boolean`	`true`	Conteúdo recolhido/colapsado
`size`	`MdsSizes`	`'md'`	Tamanho do collapse
`variant`	`MdsCollapseVariants`	`'card'`	Variante do collapse. “card” - padrão estilo card; “pipe-group” - utilizado para grupo de cards no pipe
`additionalClass`	`string`	`''`	Classe adicional
`className`	`string`	`''`	Classe CSS customizada adicionada ao host

⇄ = binding bidirecional ([(input)]).

Outputs

Output	Payload	Descrição
`onToggle`	`boolean`	Evento emitido ao alternar o estado (já suportado pelo model, mas mantendo para compatibilidade se necessário)

Storybook mds-styles (HTML/CSS) — components-collapse ↗