Skip to main content

توست

وضعیت

هدفِ normative. اندروید SnackBar متریال دارد؛ وب سرویس توست اشتراکی ندارد و نتیجه‌ها ad hoc اعلام می‌شوند؛ پذیرش در وضعیت پذیرش طراحی. کلاس .toast prototype-only.

هدف

تأیید کوتاه عمل‌های پس‌زمینه — حداکثر یک اکشن، بدون استک پشته‌ای طولانی.

ساختار

<div class="toast" role="status">رویداد حذف شد<span class="act">بازگردانی</span></div>

گونه‌ها و اندازه‌ها

یک گونه: میان‌چین پایین · ارتفاع ~۴۴ · متن ۱۳٫۵/۵۰۰ · شعاع ۱۲ · معکوس‌رنگ (تیره در تم روشن و برعکس).

حالت‌ها

حالتظاهر
default (ورود)از پایین با ۲۴۰ms
hoverزمانِ محو را متوقف می‌کند (خواندن)
focus-visibleروی اکشن؛ حلقهٔ روشن
activeکلیک اکشن → اجرا + بستن
disabledندارد
loadingخود توست پیامِ پایان عمل است — حالت بارگذاری ندارد
errorگونهٔ قرمز جدا ندارد؛ خطاهای نیازمند تصمیم، بنر/دیالوگ می‌شوند
successحالت عادیِ توست همینه («رویداد حذف شد»)

رفتار

  • بعد از ~۴ ثانیه محو؛ hover/focus تایمر را نگه می‌دارد.
  • حداکثر یک توست هم‌زمان؛ توست جدید جای قبلی را می‌گیرد.
  • حذفِ قابل‌بازگردانی به‌جای دیالوگ تأیید، توست «بازگردانی» می‌دهد.

کیبورد و دسترس‌پذیری

  • role="status" + aria-live="polite" — اعلام غیرتهاجمی.
  • اکشن دکمهٔ واقعی با متن فعل؛ فوکوس برنامه‌ای نمی‌گیرد (به‌موقع خوانده می‌شود).
  • هدف اکشن ≥۴۴px ارتفاع (هم‌ارتفاع توست).

رفتار واکنش‌گرا

میان‌چین پایین، بالای ناوبری compact (env(safe-area-inset-bottom) رعایت می‌شود)؛ در expanded همان جایگاه پایینِ صفحه.

قواعد محتوا

  • ✅ جملهٔ کوتاه گذشته‌ای + حداکثر یک فعل برای اکشن.
  • ❌ استک چندتوستی؛ توست برای خطای نیازمند تصمیم؛ توست موفقیتِ همگام‌سازی.

توکن‌ها

معکوس: --inverse-surface/--inverse-on-surface · اکشن با برندِ روشن‌شده · شعاع ۱۲ · ورود ۲۴۰ms با --ease.

پیاده‌سازی پلتفرم‌ها

  • وب: سرویس اشتراکی ندارد؛ نقطه‌های ad hoc در featureها (مثلاً نتیجهٔ ذخیره در EventModal).
  • اندروید: SnackBar متریال از طریق core/design.
  • .toast فقط در ui-design/prototypes/assets/app.css (prototype-only).

نمونهٔ تعاملی

کتابخانهٔ زندهٔ توست