Aller au contenu

Composant · Structure

Collapsible

Stable

En-tête cliquable qui révèle ou masque une région de contenu. État ouvert bindable, gestion clavier et aria-expanded/region intégrés.

Exemples

Ouvert par défaut

Ouvert par défaut. Cliquez l'en-tête pour replier.

Voir le code (Svelte) 
<Collapsible title="Conditions générales" open>
  <p class="fp-card-text">Ouvert par défaut. Cliquez l'en-tête pour replier.</p>
</Collapsible>

disabled

Voir le code (Svelte) 
<Collapsible title="Section verrouillée" disabled>
  <p class="fp-card-text">Contenu indisponible.</p>
</Collapsible>

API

PropTypeDefault
titlestringrequis
openboolean (bindable)false
disabledbooleanfalse
onToggle(open: boolean) => void–

Svelte/Vue utilisent bind:open / v-model:open ; React utilise defaultOpen. Le déclencheur porte aria-expanded et aria-controls.

Tokens utilisés

  • --st-semantic-text-primary
  • --st-semantic-border-subtle