Composants

SlideOver

Un panneau latéral ancré à droite, pour éditer ou consulter un détail sans quitter le contexte de la liste. Enrobe le Dialog d'Astryx en position inline-end, avec en-tête, contenu défilant et pied d'actions.

import { SlideOver, Button } from "@forme-ch/ui/controls";

const [open, setOpen] = useState(false);

<Button label="Ouvrir le panneau" variant="primary" onClick={() => setOpen(true)} />
<SlideOver
  isOpen={open}
  onClose={() => setOpen(false)}
  title="Détails du client"
  footer={<Button label="Enregistrer" variant="primary" onClick={() => setOpen(false)} />}
>
  …
</SlideOver>

Panneau large

La prop wide passe la largeur à 640 px — pour les formulaires denses.

<SlideOver isOpen={open} onClose={close} title="Édition avancée" wide
  footer={<Button label="Fermer" variant="primary" onClick={close} />}>
  …
</SlideOver>

Props

Prop	Type	Défaut	Description
`isOpen` *	`boolean`	—	État d'ouverture du panneau (contrôlé).
`onClose` *	`() => void`	—	Appelé à la fermeture (Échap, clic hors zone, bouton).
`title`	`ReactNode`	—	Titre affiché dans l'en-tête du panneau.
`ariaLabel`	`string`	—	Nom accessible si `title` n'est pas une chaîne (repli « Panneau »).
`children` *	`ReactNode`	—	Contenu du panneau.
`footer`	`ReactNode`	—	Zone d'actions rendue sous le contenu (boutons).
`wide`	`boolean`	—	Panneau large (640 px) au lieu de la largeur standard (480 px).
`className`	`string`	—	Classe CSS additionnelle.

Accessibilité

Le panneau est un dialogue modal : le focus y est piégé tant qu'il est ouvert, Échap et le clic hors zone le ferment (via onClose), et le focus revient au déclencheur. Fournis toujours un title lisible, ou un ariaLabel si le titre n'est pas du texte, pour que le dialogue soit correctement nommé.

Do & Don't

✓ À faire

Utiliser le SlideOver pour un détail ou une édition rapide dans le contexte de la liste. Mettre les actions dans footer.

✕ À éviter

Empiler plusieurs SlideOver. L'utiliser pour une décision courte et bloquante — c'est le rôle de Modal.