Accordion
NavegaçãoLista verticalmente empilhável de cabeçalhos que revelam ou ocultam conteúdo associado.
Preview
Visualização do componente Accordion com diferentes configurações
Instalação
Via CLI (Recomendado)
1. Inicializar (primeira vez)
npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup2. Adicionar componente
npx @scmposs/hollow-ui add accordionOs comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.
Via NPM
Instalar pacote completo
npm install @scmposs/hollow-ui@latestInstala todos os componentes como dependência do projeto.
Uso Básico
Exemplo básico
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@scmposs/hollow-ui"
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Pergunta 1</AccordionTrigger>
<AccordionContent>
Resposta para a primeira pergunta.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Pergunta 2</AccordionTrigger>
<AccordionContent>
Resposta para a segunda pergunta.
</AccordionContent>
</AccordionItem>
</Accordion>Propriedades
Accordion
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type | "single" | "multiple" | - | Define se um ou múltiplos itens podem ser abertos |
| collapsible | boolean | false | Permite fechar todos os itens (apenas type="single") |
| defaultValue | string | string[] | - | Valor(es) inicial(is) do accordion |
| value | string | string[] | - | Valor controlado do accordion |
| onValueChange | function | - | Callback quando o valor muda |
| disabled | boolean | false | Desabilita todo o accordion |
AccordionItem
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | - | Identificador único do item |
| disabled | boolean | false | Desabilita este item específico |
| className | string | - | Classes CSS adicionais |
Exemplos
Accordion de FAQ
Múltiplos Itens Abertos
Permitir múltiplos itens abertos
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Seção 1</AccordionTrigger>
<AccordionContent>Conteúdo da seção 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Seção 2</AccordionTrigger>
<AccordionContent>Conteúdo da seção 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Seção 3</AccordionTrigger>
<AccordionContent>Conteúdo da seção 3</AccordionContent>
</AccordionItem>
</Accordion>Accordion Controlado
Estado controlado com React
const [value, setValue] = useState("item-1")
<Accordion type="single" value={value} onValueChange={setValue}>
<AccordionItem value="item-1">
<AccordionTrigger>Item Controlado 1</AccordionTrigger>
<AccordionContent>Este é um accordion controlado.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item Controlado 2</AccordionTrigger>
<AccordionContent>Você pode controlar o estado externamente.</AccordionContent>
</AccordionItem>
</Accordion>Com Conteúdo Complexo
Acessibilidade
O componente Accordion segue as diretrizes WAI-ARIA e implementa:
- Suporte completo para navegação via teclado (Tab, Enter, Espaço)
- Atributos ARIA apropriados (aria-expanded, aria-controls)
- Indicadores visuais claros de estado (aberto/fechado)
- Foco visível e animações suaves
- Suporte para leitores de tela