Collapse

Painéis de conteúdo recolhíveis para FAQs, acordeões e seções expansíveis.

Importação

import { Collapse } from 'asterui'

Exemplos

Collapse Básico

Painéis recolhíveis simples.

</>

What is AsterUI?

AsterUI is a React component library built on DaisyUI and Tailwind CSS.

How do I install it?

Run npm install asterui to get started.

Is it free?

Yes, AsterUI is open source and free to use.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'What is AsterUI?',
      children: 'AsterUI is a React component library built on DaisyUI and Tailwind CSS.',
    },
    {
      key: '2',
      label: 'How do I install it?',
      children: 'Run npm install asterui to get started.',
    },
    {
      key: '3',
      label: 'Is it free?',
      children: 'Yes, AsterUI is open source and free to use.',
    },
  ]
  
  return (
      <Collapse items={items} defaultActiveKey={['1']} />
    )
}

export default App

Acordeão

Apenas um painel pode estar aberto por vez.

</>

Section 1

Content for section 1. Click another section to close this one.

Section 2

Content for section 2. Only one section can be open.

Section 3

Content for section 3. This is accordion behavior.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Section 1',
      children: 'Content for section 1. Click another section to close this one.',
    },
    {
      key: '2',
      label: 'Section 2',
      children: 'Content for section 2. Only one section can be open.',
    },
    {
      key: '3',
      label: 'Section 3',
      children: 'Content for section 3. This is accordion behavior.',
    },
  ]
  
  return (
      <Collapse items={items} accordion defaultActiveKey="1" />
    )
}

export default App

Sem Borda

Collapse sem bordas.

</>

Panel 1

Content without borders for a cleaner look.

Panel 2

Great for FAQ sections or sidebars.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Panel 1',
      children: 'Content without borders for a cleaner look.',
    },
    {
      key: '2',
      label: 'Panel 2',
      children: 'Great for FAQ sections or sidebars.',
    },
  ]
  
  return (
      <Collapse items={items} bordered={false} />
    )
}

export default App

Conteúdo Aninhado

Collapse com conteúdo aninhado rico.

</>

Getting Started

Follow these steps to get started:

1. Install the package
2. Import components
3. Start building

Read Docs

Advanced Usage

Learn about advanced patterns and customization options.

import { Collapse, Button, Space } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Getting Started',
      children: (
        <Space direction="vertical" size="sm">
          <p>Follow these steps to get started:</p>
          <ol className="list-decimal list-inside">
            <li>Install the package</li>
            <li>Import components</li>
            <li>Start building</li>
          </ol>
          <Button color="primary" size="sm">Read Docs</Button>
        </Space>
      ),
    },
    {
      key: '2',
      label: 'Advanced Usage',
      children: 'Learn about advanced patterns and customization options.',
    },
  ]
  
  return (
      <Collapse items={items} />
    )
}

export default App

Modo Ghost

Fundo transparente para aparência mínima.

</>

Transparent Background

Ghost mode removes the background color.

Clean Look

Great for minimalist designs.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Transparent Background',
      children: 'Ghost mode removes the background color.',
    },
    {
      key: '2',
      label: 'Clean Look',
      children: 'Great for minimalist designs.',
    },
  ]
  
  return (
      <Collapse items={items} ghost bordered={false} />
    )
}

export default App

Ícone Plus/Minus

Use ícones plus/minus em vez de setas.

</>

Plus/Minus Icon

This panel uses plus/minus icons instead of arrows.

Another Panel

Click the plus icon to expand.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Plus/Minus Icon',
      children: 'This panel uses plus/minus icons instead of arrows.',
    },
    {
      key: '2',
      label: 'Another Panel',
      children: 'Click the plus icon to expand.',
    },
  ]
  
  return (
      <Collapse items={items} icon="plus" />
    )
}

export default App

API

Collapse

Propriedade	Descrição	Tipo	Padrão
items	Itens de painel do collapse	CollapseItemType[]	-
activeKey	Chaves de painel ativo controladas	string | number | (string | number)[]	-
defaultActiveKey	Chaves de painel ativo iniciais	string | number | (string | number)[]	-
accordion	Apenas um painel aberto por vez	boolean	false
bordered	Mostrar borda ao redor dos painéis	boolean	true
ghost	Estilo de fundo transparente	boolean	false
size	Variante de tamanho	'sm' | 'md' | 'lg'	'md'
icon	Tipo de ícone para indicador de expansão	'arrow' | 'plus' | 'none'	'arrow'
expandIconPlacement	Posicionamento do ícone	'start' | 'end'	'start'
onChange	Handler de mudança	(activeKey: (string | number)[]) => void	-
data-testid	ID de teste para o componente	string	'collapse'
className	Classes CSS adicionais	string	-

CollapseItemType

Propriedade	Descrição	Tipo	Padrão
key	Identificador único para o painel	string | number	-
label	Conteúdo do cabeçalho do painel	React.ReactNode	-
children	Conteúdo do corpo do painel	React.ReactNode	-
extra	Elemento extra no canto do cabeçalho	React.ReactNode	-
showArrow	Se deve mostrar o ícone de expansão	boolean	true
collapsible	Modo recolhível	'header' | 'icon' | 'disabled'	-
className	Nome de classe personalizado para este painel	string	-

Acessibilidade

• Cabeçalhos de painel são acessíveis via teclado com Enter e Espaço
• Usa aria-expanded para indicar o estado do painel
• Usa aria-disabled para painéis desabilitados
• Painéis expõem data-state para testes e estilização