Skip to main content

Accordion

Os acordeões exibem uma lista de opções que podem ser expandidas/recolhidas para revelar mais informações.

tip

Usamos o componente Accordion do Radix por baixo dos panos, que trás com ele acessibilidade para nosso componente.

Importação​

import { Accordion } from '@escaletech/delta'

Utilização​

Resultado
Loading...

Apresentar somente um conteúdo​

Resultado
Loading...

Desabilitado​

Resultado
Loading...

Customização​

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    accordionTitleColor: '$neutralDarkest',
    accordionItemColor: '$neutralDark',
    accordionItemBackgroundColorHover: '$neutralLight',
    accordionItemBorderColor: '$neutralMedium'
  }
})

Tokens​

TokenDescrição
colors.accordionTitleColorDefine a cor do titulo
colors.accordionItemColorDefine a cor do contéudo
colors.accordionItemBackgroundColorHoverDefine a cor do hover quando o item está fechado
colors.accordionItemBorderColorDefine a cor da borda dos itens

Props​

Accordion​

PropriedadeDescriçãoTipoPadrãoObrigatório
valueO valor controlado do item a ser expandido quando type for "single" ou "multiple".string-❌
disabledQuando true, evita que o usuário interaja com o acordeão e todos os seus itens.booleanfalse❌
typeDetermina se um ou vários itens podem ser abertos ao mesmo tempo."single" ou "multiple"-✅
nameName para controlar quando type for "single"string-❌

Accordion.Item​

PropriedadeDescriçãoTipoPadrãoObrigatório
titleDefine o título do item.string-✅
valueUm valor único para o item.string-✅
disabledQuando true, evita que o usuário interaja com o item.booleanfalse❌