Skip to content

Cartão

AlpopCard é o container de superfície da biblioteca. Um único componente cobre todas as formas de cartão: uma superfície simples com padding, uma seção com ícone e título, e um painel expansível.

O cabeçalho é opcional: sem title, description, icon ou ações, ele é omitido e o cartão vira apenas uma superfície com padding.

Seção com ícone

Cobrança

Adicione os itens que compõem esta cobrança.

Tabela de itens vai aqui.

Simples

Contratos

Conteúdo do card.

Expansível

Passe expansible para tornar o corpo recolhível. Só então o cartão renderiza o botão de alternância — um <button> real com aria-expanded/aria-controls, de modo que um cartão estático nunca adiciona uma parada de foco no teclado.

Com uuid, o estado aberto/fechado é persistido em localStorage sob essa chave e restaurado na montagem (tendo precedência sobre expanded).

Corpo recolhível.

Erro

Cobrança

Borda, título e ícone ficam vermelhos.

Props

PropTipoPadrãoDescrição
titleStringnullTítulo exibido no cabeçalho
iconStringnullNome do ícone; renderiza o quadrado de ícone
descriptionStringnullLinha secundária abaixo do título
expansibleBooleanfalseTorna o corpo recolhível e renderiza o botão de alternância
expandedBooleanfalseEstado inicial aberto (só quando expansible)
uuidStringPersiste o estado aberto/fechado em localStorage
errorBooleanfalseBorda, título e ícone em vermelho

Slots

SlotDescrição
defaultConteúdo do card
iconSubstitui o conteúdo do quadrado de ícone
title-suffixConteúdo ao lado do título (ex.: um contador)
header-actionsAções exibidas à direita do cabeçalho
footerRodapé alinhado à direita

Eventos

EventoDescrição
expandingEmitido quando o corpo abre; nunca quando ele é recolhido