Dialog
Composant de dialogue modal construit sur Radix Dialog. Utilisez-le pour les confirmations, les formulaires et les tâches ciblées.
Tâches modales cibléesLien vers la section
Les boîte dialogue component rend une superposition modale pour les tâches ciblées qui nécessitent l'attention de l'utilisateur.
Utilisez-le pour:
- confirmations
- Formes courtes
- Décisions destructrices
- créer ou modifier des flux
- tâches qui ne devraient pas s'éloigner de la page actuelle
Le dialogue est construit sur Boîte de dialogue Radix et stylisé avec des tokens PyColors tels que bg-card, border-borderet text-card-foreground.
Idée de base
La boîte de dialogue est pour les décisions ou les tâches ciblées. Si le flux devient long, de navigation ou en plusieurs étapes, utilisez un panneau latéral ou une page dédiée.
ImportationLien vers la section
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez la boîte de dialogue pour un formulaire ciblé ou une tâche courte qui doit rester dans son contexte.
Défilement liéLien vers la section
Conservez un contenu d'examen plus long à l'intérieur d'une surface délimitée par une fenêtre d'affichage telle que flex max-h-[80dvh] flex-col overflow-hidden. Donner l'en-tête et le pied de page shrink-0, et mettre min-h-0 flex-1 overflow-y-auto dans la région de contenu. Le titre et les actions restent alors visibles pendant que le corps défile.
Donnez à la région scrollable un nom accessible et tabIndex={0} afin que les utilisateurs de clavier puissent l'atteindre et le faire défiler. Les Exemple à long contenu démontre cette disposition et vérifie le focus, le défilement et les actions atteignables.
Quand utiliser DialogLien vers la section
Utilisez la boîte de dialogue lorsque l'utilisateur doit terminer, confirmer ou annuler une tâche ciblée.
Confirmation
Abrégé
Tâche ciblée
Confirmation destructiveLien vers la section
Utilisez la boîte de dialogue pour les actions destructrices qui nécessitent une intention explicite de l'utilisateur.
Règle d'écoulement destructif
L'action destructrice doit être explicite, visuellement distincte et placée après l'option la plus sûre.
UtilisationsLien vers la section
Déclenchement avec un élément sémantique
Utilisation DialogTrigger asChild avec a Button ou un autre déclencheur sémantique.
Fournir un contexte clair
Chaque dialogue doit avoir un DialogTitle et une utile DialogDescription.
Gardez le contenu concentré
Un dialogue doit généralement contenir une tâche, un formulaire ou une décision.
Placer les actions dans le pied de page
Gardez annuler et confirmer les actions dans DialogFooter pour un placement prévisible.
Fermer uniquement lorsque la tâche est terminée ou annulée
Ne fermez pas la boîte de dialogue automatiquement si la soumission échoue. Afficher l'erreur dans le contexte.
Boîte de dialogue vs feuille vs menu déroulantLien vers la section
| Situation | Utilisation |
|---|---|
| Confirmer l'action destructrice | boîte dialogue |
| Forme courte | boîte dialogue |
| Créer ou modifier un petit enregistrement | boîte dialogue |
| Filtres avancés | Sheet |
| Flux de travail latéral ou panneau de détails | Sheet |
| Actions de rangée ou petit menu contextuel | menu déroulant |
| Long débit multi-étapes | Page ou feuille |
Règle de décision
La boîte de dialogue bloque la page pour une tâche ciblée. Sheet étend la page pour les flux de travail latéraux. DropdownMenu expose des actions rapides.
APILien vers la section
Composants
| Composante | Désignation |
|---|---|
Dialog | Récipient racine |
DialogTrigger | Élément déclencheur, généralement avec asChild |
DialogContent | Surface modale, superposition et comportement proche |
DialogHeader | Titre et description stack helper |
DialogFooter | Action Row Helper |
DialogTitle | Titre du dialogue accessible |
DialogDescription | Texte d ' appui |
DialogClose | Fermez le contrôle, généralement en enveloppant un bouton avec asChild |
Props
Les composants de la boîte de dialogue étendent leurs accessoires Radix Dialog respectifs.
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;AccessibilitéLien vers la section
- La boîte de dialogue est construite sur les primitives Radix Dialog.
- La focus est piégée à l'intérieur du dialogue lorsqu'elle est ouverte.
- La focus est restaurée sur le déclencheur lorsque la boîte de dialogue se ferme.
- Escape devrait fermer la boîte de dialogue à moins que le flux ne nécessite une manipulation personnalisée minutieuse.
- Chaque dialogue a besoin d’une
DialogTitle. - Utilisation
DialogDescriptionpour expliquer la tâche ou le risque. - Évitez les dialogues imbriqués.
- N'utilisez pas Dialog pour les longs flux de navigation.
Règle d'accessibilité
Un dialogue sans titre clair n'est pas un dialogue complet. Le titre donne aux utilisateurs de technologies d'assistance le contexte dont ils ont besoin.
Préférez/évitezLien vers la section
Préférez
- Une tâche par dialogue
- Titre clair et courte description
- Déclencheur sémantique avec
asChild - annuler et confirmer les actions dans le pied de page
- retour d'erreur en ligne pour les soumissions échouées
Éviter
- de longs flux de travail à plusieurs étapes
- dialogues imbriqués
- dialogues sans titres
- Fermeture sur les erreurs de soumission
- Utilisation de la boîte de dialogue pour des actions de ligne simples
Directives de copie du produitLien vers la section
La copie de la boîte de dialogue doit être directe et spécifique.
Créer un projet
Creation flows should feel lightweight, guided, and reversible.