رفتن به محتوای اصلی

بنر

وضعیت​

هدفِ normative. وب ConflictBanner و بازخورد فرم ورود را دارد؛ پذیرش در وضعیت پذیرش طراحی. کلاس‌های .cf-banner/.error-banner/ .ok-banner prototype-only.

هدف​

دو سطح: بنرِ سطح اپ فقط برای تعارض نسخه‌ها بین دستگاه‌ها؛ بازخورد درون‌فرم برای خطا و موفقیت (ورود). همگام‌سازی موفق ساکت است — نه بنر، نه توست.

ساختار​

<div class="cf-banner" role="region" aria-label="تعارض همگام‌سازی">
  ۲ رویداد در دستگاه دیگر تغییر کرده‌اند
  <button class="act">مشاهده و تصمیم</button>
</div>

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

گونهکجارنگ
.cf-bannerچسبیده زیر نوار بالا، تمام‌عرضکهربایی (--warn + ظرف)
.error-bannerدرون فرم، زیر فیلدها--holiday با پس‌زمینهٔ ۸–۱۰٪
.ok-bannerدرون فرم--ok با پس‌زمینهٔ ۸–۱۰٪

حالت‌ها​

حالتظاهر
defaultبدون سایه؛ پنهان‌سازی با اتریبیوت hidden و قانون .cf-banner[hidden]
hoverروی دکمهٔ عمل («مشاهده و تصمیم»)
focus-visibleحلقهٔ برند روی دکمهٔ عمل
activeکلیک → دیالوگ فهرست تعارض‌ها
disabledندارد — بنر یا هست یا نیست
loadingندارد؛ خودِ تصمیم‌ها asyncاند و دکمه‌شان قفل می‌شود
errorخودِ .error-banner است (خطای فرم/ورود)
successخودِ .ok-banner است («کد تأیید شد»)

رفتار​

  • بنر اپ فقط یک عمل دارد: «مشاهده و تصمیم» — تصمیم‌گیری در دیالوگ تعارض‌ها (هر آیتم مستقل).
  • بعد از تصمیمِ آخرین آیتم، بنر به‌تنهایی جمع می‌شود.
  • بازخورد فرم پیش‌فرض پنهان است و با کلاس .on ظاهر می‌شود.

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

  • خطا role="alert" · موفقیت/اطلاع role="status" (به‌هنگام اعلام برای صفحه‌خوان‌ها).
  • بنر فوکوس نمی‌گیرد؛ دکمهٔ عملش در ترتیب Tab است.
  • هدف لمسی دکمه ≥۴۴px.

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

تمام‌عرض در همهٔ کلاس‌ها؛ متن + دکمه در یک سطر در compact (متن کوتاه است).

قواعد محتوا​

  • ✅ یک جملهٔ واقعیت + یک عمل («۲ رویداد… تغییر کرده‌اند» / «مشاهده و تصمیم»).
  • ❌ بنر برای موفقیت همگام‌سازی یا خبر/تبلیغ؛ دو عمل روی بنر اپ.

توکن‌ها​

--warn/--warn-container · --holiday/--ok با ۸–۱۰٪ پس‌زمینه · بدون سایه · --ease ۱۸۰ms ظاهرشدن.

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

  • وب: ConflictBanner/ConflictList در features/sync/ و بازخورد فرم در LoginPage.tsx.
  • اندروید: Snack‌/Banner متریال از طریق core/design (جریان تعارض هنوز نیست — موتور sync پیاده نشده).
  • کلاس‌های .cf-banner/.error-banner/.ok-banner فقط در ui-design/prototypes/assets/app.css (prototype-only).

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

کتابخانهٔ زندهٔ بنر