بنر
وضعیت
هدفِ 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).