Toast container (1.x)
The 1.x controlled list of toasts (toasts, onDismiss), drawn by the @krizaka/ui Toaster.
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.
DépréciéDepuis 2.3.0, retiré en 3.0.0. Utiliser à la place : Toast (Krizaka UI).
Pourquoi il existe au-dessus de Krizaka UI
Kept so that the apps written against 1.x keep their notifications while they migrate to toast().
Repose surToast
Quand l’utiliser
- Never in new code: mount
Toasteronce and calltoast.success(…)from@krizaka/ui/toast.
Quand ne pas l’utiliser
- Anywhere new: it is deprecated.À la place : Toast
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 { ToastContainer } from "@krizaka/orazaka-design-system";Props
The 1.x controlled toast list, drawn by the
| Prop | Type | Défaut | Description |
|---|---|---|---|
onDismissrequis | (id: string) => void | — | Called with the id when a toast is closed or times out. |
toastsrequis | ToastItem[] | — | The active toasts (controlled): a new id is shown, a removed id is dismissed. |
closeLabel | string | Dismiss notification | The accessible name of each close button (1.x: "Dismiss notification"); pass it translated. |
label | string | Notifications | The accessible name of the notifications region — 1.x had none; pass it translated. |
Accessibilité
- The primitive's: a polite live region named by
label.
Bonnes pratiques
- Pass
labelandcloseLabeltranslated 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