Collapse

Panneaux de contenu pliables pour les FAQ, accordéons et sections extensibles.

Import

import { Collapse } from 'asterui'

Exemples

Collapse de base

Panneaux pliables 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

Accordéon

Un seul panneau peut être ouvert à la fois.

</>

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

Sans bordure

Collapse sans bordures.

</>

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

Contenu imbriqué

Collapse avec contenu imbriqué riche.

</>

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

Mode fantôme

Fond transparent pour une apparence minimale.

</>

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

Icône Plus/Moins

Utiliser des icônes plus/moins au lieu de flèches.

</>

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

Propriété	Description	Type	Défaut
items	Éléments de panneau pliable	CollapseItemType[]	-
activeKey	Clés de panneau actif contrôlées	string | number | (string | number)[]	-
defaultActiveKey	Clés de panneau actif initiales	string | number | (string | number)[]	-
accordion	Un seul panneau ouvert à la fois	boolean	false
bordered	Afficher la bordure autour des panneaux	boolean	true
ghost	Style de fond transparent	boolean	false
size	Variante de taille	'sm' | 'md' | 'lg'	'md'
icon	Type d’icône pour l’indicateur d’expansion	'arrow' | 'plus' | 'none'	'arrow'
expandIconPlacement	Placement de l’icône	'start' | 'end'	'start'
onChange	Gestionnaire de changement	(activeKey: (string | number)[]) => void	-
data-testid	ID de test pour le composant	string	'collapse'
className	Classes CSS supplémentaires	string	-

CollapseItemType

Propriété	Description	Type	Défaut
key	Identifiant unique pour le panneau	string | number	-
label	Contenu de l’en-tête du panneau	React.ReactNode	-
children	Contenu du corps du panneau	React.ReactNode	-
extra	Élément supplémentaire dans le coin de l’en-tête	React.ReactNode	-
showArrow	Afficher ou non l’icône d’expansion	boolean	true
collapsible	Mode pliable	'header' | 'icon' | 'disabled'	-
className	Nom de classe personnalisé pour ce panneau	string	-

Accessibilité

• Les en-têtes de panneau sont accessibles au clavier avec Entrée et Espace
• Utilise aria-expanded pour indiquer l’état du panneau
• Utilise aria-disabled pour les panneaux désactivés
• Les panneaux exposent data-state pour les tests et le style