Dialog (1.x)
The 1.x modal (open, onClose, title, description), drawn by the @krizaka/ui dialog.
Web — React, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.
Pourquoi il existe au-dessus de Krizaka UI
Kept so that the apps written against 1.x keep working: focus trap, Escape and outside click now come from the primitive.
Repose surDialog
Quand l’utiliser
- Never in new code: compose
Dialog.Root/Dialog.Content/Dialog.Header/Dialog.Title/Dialog.Bodyfrom@krizaka/ui/dialog.
Quand ne pas l’utiliser
- Anywhere new: it is deprecated.À la place : Dialog
Installation
Installer
npm install @krizaka/orazaka-design-system && npm install -D tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).
Importer
import { Dialog } from "@krizaka/orazaka-design-system";Props
The 1.x modal dialog, drawn by the
| Prop | Type | Défaut | Description |
|---|---|---|---|
childrenrequis | ReactNode | — | Panel body. |
onCloserequis | () => void | — | Invoked on Escape, a click outside, or the close button. |
openrequis | boolean | — | Controls visibility. When false the dialog is fully unmounted. |
closeLabel | string | Close | Accessible label for the close (×) button. |
description | string | — | Optional sub-heading rendered beneath the title. |
title | string | — | Optional heading rendered in the panel header. |
Accessibilité
- The primitive's: a modal dialog named by its title.
Clavier
| Touches | Action |
|---|---|
| Esc | Closes it and returns the focus. |
Bonnes pratiques
- Pass
closeLabeltranslated until the migration.
Composants liés
Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub