Toast
既存のBase UI Toastで寿命とアクセシビリティを管理します。成功、エラー、取り消し、自動終了のローカル例で、サーバー保存は行いません。
@neumorphism-ui/toastプレビュー
下書き利用可能
インストール
インストール: toast
npx shadcn@latest add @neumorphism-ui/toastCLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。
この Registry を初めて使う場合は、先に namespace の設定 を完了してください。
使い方
使い方: インストール
npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/toastImport
Toast の import コード
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { ToastProvider, Toaster, useToast } from "@/components/ui/toast";Example
Toast の使用コード
const copy = {
en: { save: "Show success", success: "Changes saved", body: "This is a local demonstration. No server request was made.", fail: "Show error", error: "Could not save", retry: "Your changes are retained. Try again.", archive: "Archive draft", archived: "Draft archived", undo: "Undo", undone: "Archive undone", idle: "Draft available", timed: "Show timed toast", quick: "Quick update", region: "Notifications", close: "Dismiss notification" },
ko: { save: "성공 알림", success: "변경 사항 저장됨", body: "로컬 예제이며 서버 요청은 전송하지 않습니다.", fail: "오류 알림", error: "저장하지 못했습니다", retry: "변경 사항은 유지됩니다. 다시 시도하세요.", archive: "초안 보관", archived: "초안이 보관되었습니다", undo: "실행 취소", undone: "보관을 취소했습니다", idle: "초안 사용 가능", timed: "자동 닫힘 알림", quick: "업데이트 알림", region: "알림", close: "알림 닫기" },
ja: { save: "成功通知", success: "変更を保存しました", body: "ローカル例です。サーバーへの送信は行いません。", fail: "エラー通知", error: "保存できませんでした", retry: "変更は保持されています。再試行してください。", archive: "下書きを保管", archived: "下書きを保管しました", undo: "元に戻す", undone: "保管を取り消しました", idle: "下書き利用可能", timed: "自動で閉じる通知", quick: "更新通知", region: "通知", close: "通知を閉じる" },
zh: { save: "成功通知", success: "更改已保存", body: "这是本地示例,未发送服务器请求。", fail: "错误通知", error: "保存失败", retry: "更改仍然保留,请重试。", archive: "归档草稿", archived: "草稿已归档", undo: "撤销", undone: "已撤销归档", idle: "草稿可用", timed: "自动关闭通知", quick: "更新通知", region: "通知", close: "关闭通知" },
};
function ToastActions({ locale }: { locale: keyof typeof copy }) {
const text = copy[locale];
const manager = useToast();
const [status, setStatus] = React.useState<string>(text.idle);
return <div className="grid gap-4"><div className="flex flex-wrap gap-3">
<Button onClick={() => manager.add({ title: text.success, description: text.body, type: "success" })}>{text.save}</Button>
<Button onClick={() => manager.add({ title: text.error, description: text.retry, type: "error" })}>{text.fail}</Button>
<Button onClick={() => { setStatus(text.archived); const id = manager.add({ title: text.archived, description: text.body, actionProps: { children: text.undo, onClick: () => { setStatus(text.undone); manager.close(id); } } }); }}>{text.archive}</Button>
<Button onClick={() => manager.add({ title: text.quick, timeout: 1200 })}>{text.timed}</Button>
</div><p role="status" className="text-sm text-[var(--muted-foreground)]">{status}</p></div>;
}
export default function ToastExample({ locale = "ja" }: { locale?: keyof typeof copy }) {
// Keep examples available for inspection; the timed example overrides this.
return <ToastProvider timeout={0}><ToastActions locale={locale} /><Toaster label={copy[locale].region} closeLabel={copy[locale].close} /></ToastProvider>;
}API リファレンス
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
ToastProvider | timeout / limit / toastManager | number / ToastManager | — | 表示時間、件数、外部マネージャーです。0で自動終了を無効にします。 |
useToast | add / close / update / promise | Base UI toast manager methods | — | 通知を生成、終了、更新し、非同期状態を追跡します。 |
Toaster | label / closeLabel | string | — | 通知領域と閉じるボタンの名前です。 |
アクセシビリティ
- 01
F6で通知領域へ移動します。色だけでなく見出しと説明で結果を伝えてください。
- 02
重要な復旧操作は画面にも用意してください。例では確認用に手動終了を基本にしています。