CatBut — Dropdown & Disclosuredirection · trigger · controlled · closeOnOutsideClick · accordion

DropDown.tsx

Directions

direction="down" | "up" | "left" | "right" — le panel s'anime depuis le trigger

DropDown.tsx

Trigger — ReactNode vs render-prop

Le trigger accepte n'importe quel ReactNode, ou une render-prop ({ isOpen }) => ReactNode

trigger = ReactNode (bouton simple)

trigger = render-prop (flèche animée)

trigger = avatar (aucun style imposé)

PX

DropDown.tsx

closeOnOutsideClick

closeOnOutsideClick=true (défaut) ferme au clic en dehors · false laisse le panel ouvert

closeOnOutsideClick=true (défaut)

closeOnOutsideClick=false

DropDown.tsx

Mode contrôlé

open + onOpenChange — l'état est piloté depuis le parent

open={ddControlled} onOpenChange={setDdControlled}

isOpen: false

DropDown.tsx

Durée d'animation

duration en ms — compare la vitesse d'ouverture/fermeture

duration=80

duration=200

duration=500

duration=1000

DropDown.tsx

Cas réels

Menu de navigation · sélecteur de langue · menu contextuel

Menu navigation

Sélecteur de langue

Menu contextuel (direction=right)

Disclosure.tsx

Basique — label + contenu

Dropdown avec trigger figé : label + flèche qui pivote. Clic pour révéler/masquer.

Pourquoi utiliser CatBut ?
Comment personnaliser le thème ?
Peut-on utiliser Disclosure sans Dropdown ?

Disclosure.tsx

Direction

direction="down" (défaut) | "up" — le panel s'ouvre vers le bas ou vers le haut

direction="down" (défaut)

Section ouverte vers le bas

direction="up"

Espace avant pour visualiser l'ouverture vers le haut

Section ouverte vers le haut

Disclosure.tsx

Mode contrôlé

open + onOpenChange — piloter l'état depuis le parent

open={discControlled} onOpenChange={setDiscControlled}

isOpen: false
Disclosure contrôlée

Disclosure.tsx

Accordéon (un seul ouvert à la fois)

Plusieurs Disclosure contrôlées partagent un état parent — pattern accordéon classique

Configuration du stream
Gestion des commandes
Alertes & événements
Intégrations tierces

Disclosure.tsx

Cas réels

Paramètres avancés · section de filtres · liste de détails

Paramètres avancés

Paramètres avancés

Filtres

Filtres 3 actifs

Détails d'un clip (label riche)

Speedrun finale

il y a 2h · 1.2k vues

CatBut · Dropdown.tsx · Disclosure.tsx · direction · trigger · closeOnOutsideClick · controlled · duration · accordion