Collapse

Paneles de contenido plegables para FAQs, acordeones y secciones expandibles.

Importar

import { Collapse } from 'asterui'

Ejemplos

Collapse Básico

Paneles plegables 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ón

Solo un panel puede estar abierto a la 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

Sin Bordes

Collapse sin bordes.

</>

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

Contenido Anidado

Collapse con contenido anidado enriquecido.

</>

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

Fondo transparente para apariencia 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

Icono Plus/Minus

Usa iconos de más/menos en lugar de flechas.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
items	Elementos de panel de collapse	CollapseItemType[]	-
activeKey	Claves de panel activo controladas	string | number | (string | number)[]	-
defaultActiveKey	Claves de panel activo iniciales	string | number | (string | number)[]	-
accordion	Solo un panel abierto a la vez	boolean	false
bordered	Mostrar borde alrededor de los paneles	boolean	true
ghost	Estilo de fondo transparente	boolean	false
size	Variante de tamaño	'sm' | 'md' | 'lg'	'md'
icon	Tipo de icono para indicador de expandir	'arrow' | 'plus' | 'none'	'arrow'
expandIconPlacement	Ubicación del icono	'start' | 'end'	'start'
onChange	Manejador de cambio	(activeKey: (string | number)[]) => void	-
data-testid	ID de prueba para el componente	string	'collapse'
className	Clases CSS adicionales	string	-

CollapseItemType

Propiedad	Descripción	Tipo	Predeterminado
key	Identificador único para el panel	string | number	-
label	Contenido del encabezado del panel	React.ReactNode	-
children	Contenido del cuerpo del panel	React.ReactNode	-
extra	Elemento extra en la esquina del encabezado	React.ReactNode	-
showArrow	Si mostrar el icono de expandir	boolean	true
collapsible	Modo plegable	'header' | 'icon' | 'disabled'	-
className	Nombre de clase personalizado para este panel	string	-

Accesibilidad

• Los encabezados de panel son accesibles por teclado con Enter y Espacio
• Usa aria-expanded para indicar el estado del panel
• Usa aria-disabled para paneles deshabilitados
• Los paneles exponen data-state para testing y estilizado