دیگ

Notificationv1.0.0

کارتِ پررنگ برای خبری که باید دیده شود: آیکون، عنوان و توضیحِ کوتاه با زمینهٔ تمام‌رنگ، دکمهٔ بستن در انتها، یا یک ستونِ دوکنشی («بروزرسانی» و «انصراف») وقتی کاربر باید تصمیم بگیرد.

شبیه به این هم هست:Visual BellAlertToast
ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

سفارش شما ثبت شد
رسید به ایمیل شما ارسال می‌شود.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/notification.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/notification.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/notification.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/notification.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import { Notification } from "@/components/ui/notification"

<Notification
  title="نسخهٔ تازه آماده است"
  description="سعی کنید همین حالا به‌روزش کنید."
  actions={[
    { label: "بروزرسانی", onClick: update },
    { label: "انصراف", onClick: dismiss },
  ]}
/>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

کارت یک ردیف است: آیکون در ابتدا، محتوا (عنوان و توضیح) در میانه و در انتها یا دکمهٔ بستن یا ستونِ کنش‌ها. همه با پراپ روشن می‌شوند: title، description، icon، dismissible و actions. بدونِ title، توضیح به‌عنوانِ پیامِ اصلی با اندازهٔ عادی می‌آید، مثل حالتِ دوکنشی.

actions حداکثر دو دکمه می‌گیرد که روی هم می‌نشینند و با خط از متن و از یکدیگر جدا می‌شوند. رنگ‌ها همان شش رنگِ Alert هستند و متنِ توضیح، جداکننده و هاور از خودِ رنگ ساخته می‌شوند. برای پیامِ ایستا و ملایمِ داخلِ صفحه Alert و برای خبرِ تک‌خطی Visual Bell مناسب‌تر است.

دسترس‌پذیری

  • کارت role=status دارد و صفحه‌خوان آن را بدون قطعِ کاربر می‌خواند؛ رنگِ destructive از role=alert استفاده می‌کند تا فوری اعلام شود.
  • معنا فقط با رنگ منتقل نمی‌شود: هر رنگ آیکونِ مخصوص دارد و عنوان و توضیح نوعِ خبر را می‌گویند.
  • دکمه‌های کنش و بستن دکمهٔ واقعی‌اند، با Tab و Enter کار می‌کنند و فوکوسشان دیده می‌شود؛ دکمهٔ بستن برچسبِ «بستن» دارد.
  • نام کنش‌ها را با فعلِ همان کار بنویسید («بروزرسانی»)، نه «تایید»، چون کاربرِ صفحه‌خوان معمولاً فقط دکمه‌ها را می‌شنود.

مرجع API

Notification

ویژگینوعپیش‌فرضتوضیح
color"default" | "primary" | "info" | "success" | "warning" | "destructive""default"رنگِ معنایی کارت؛ آیکونِ پیش‌فرض هم از روی آن انتخاب می‌شود.
radius"none" | "sm" | "md" | "lg" | "full""lg"گردیِ گوشه‌ها.
titleReact.ReactNode—عنوانِ پررنگ؛ بدونش، description پیامِ اصلی می‌شود و با اندازهٔ عادی می‌آید.
descriptionReact.ReactNode—توضیحِ کوتاهِ زیرِ عنوان.
iconReact.ReactNode | false—آیکونِ ابتدای کارت؛ ندهید تا آیکونِ هم‌رنگ بیاید، false یعنی بدون آیکون.
actions{ label: React.ReactNode; onClick?: (event) => void }[]—ستونِ کنش‌ها در انتها؛ حداکثر دو دکمه که روی هم می‌نشینند.
dismissiblebooleanfalseدکمهٔ بستن را در انتها نشان می‌دهد و با کلیک کارت را از DOM برمی‌دارد.
open / defaultOpen / onOpenChangeboolean / boolean / (open: boolean) => voiddefaultOpen: trueنمایشِ کنترل‌شده یا کنترل‌نشده؛ onOpenChange هنگام بستن با false صدا زده می‌شود.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.