دیالوگ و برگه پایین
وضعیت
هدفِ normative. وب Modal.tsx را دارد با همین دو چیدمان؛ اندروید
ModalBottomSheet/Dialog. پذیرش در وضعیت پذیرش طراحی.
کلاسهای .dialog/.sheet prototype-only.
هدف
یک کامپوننت، دو چیدمان: در دسکتاپ دیالوگ مرکزی، در موبایل (<۷۲۰px) برگهٔ پایین. جریان استاندارد: پیشنمایش فقطخواندنی ← دکمهٔ «ویرایش» ← فرم (الگوی پیشنمایش سپس ویرایش).
ساختار
<div class="dialog-backdrop open">
<div class="dialog" role="dialog" aria-modal="true">
<div class="dialog-head">…</div>
<div class="dialog-body">…</div>
<div class="dialog-foot">…</div>
</div>
</div>
اسکریم ۴۵٪ + بلور ۳px · ورود: جابهجایی ۱۴px + محو ۲۲۰ms؛ خروج معکوس.
گونهها و اندازهها
| چیدمان | کجا | مشخصات |
|---|---|---|
| مرکزی | ≥۷۲۰px | عرض حداکثر ۴۸۰ · شعاع ۱۶ |
| برگهٔ پایین | <۷۲۰px | عرض کامل · شعاع بالایی ۲۴ · دستگیرهٔ ۳۶×۴ · حداکثر ۹۲dvh |
حالتها
| حالت | ظاهر |
|---|---|
| default (باز) | اسکریم + بلور؛ محتوا با ۱۴px جابهجایی میآید |
| hover | روی دکمههای پاورقی (نه خود دیالوگ) |
| focus-visible | حلقهٔ برند روی کنترلهای داخل |
| active | کشیدن دستگیره به پایین = بستن (برگه) |
| disabled | دکمهٔ اصلی تا اعتبارسنجی فرم |
| loading | دکمهٔ اصلی اسپینر میگیرد؛ دیالوگ باز میماند |
| error | خطای فرم داخل بدنه (متن قرمز) — دیالوگ بسته نمیشود |
| success | بعد از عمل موفق بسته میشود + توست نتیجه |
رفتار
- بستن:
Esc، کلیک روی اسکریم، دکمهٔ × — به همین ترتیب اولویت؛ مگر فرم کثیف باشد که اول تأیید میخواهد. - قفل اسکرول بدنه هنگام باز بودن؛ همزمان فقط یک لایه از هر عمق.
- حذفِ قابلبازگردانی بهجای دیالوگ تأیید، توست «بازگردانی» میدهد.
کیبورد و دسترسپذیری
role="dialog"+aria-modal="true"+ نامِ دسترسپذیر ا ز عنوان سرصفحه (aria-labelیاaria-labelledby).Tabدر دیالوگ محبوس (focus trap) و پس از بستن، فوکوس به عنصر محرک برمیگردد (restore).Escاول عمیقترین لایه را میبندد (تاریخیاب ← منو ← دیالوگ).- پاورقی: حداکثر یک دکمهٔ اصلی؛ مخرب در سمت مقابل؛ فاصلهٔ ۸px بین «ذخیره/ویرایش» و «انصراف».
رفتار واکنشگرا
لبهٔ چیدمان ۷۲۰px است (مستقل از کلاسهای پنجرهٔ ناوبری) — یک مودال باریک روی تبلت عمودی هم برگه میماند تا انگشتها به دکمهها برسند.
قواعد محتوا
- ✅ عنوان کوتاه (عنوان موجودیت)؛ دکمههای فعل.
- ❌ دیالوگ داخل دیالوگ؛ فرم طولانی چند-مرحلهای در برگهٔ موبایل.
توکنها
اسکریم ۴۵٪ + بلور ۳px · شعاع ۱۶/۲۴ · سایه ۳ · --ease ۱۸۰–۲۴۰ms
(transform+opacity).
پیادهسازی پلتفرمها
- وب: پیادهسازیشده —
Modal.tsx(برگهٔ پایین <lg/۱۰۲۴، دیالوگ مرکزیlg+؛ Esc، focus trap، restore، scroll lock،role="dialog"/aria-modal)؛ مصرفکنندهها:EventModal، مودال Booking،TaskDetailSheet. - اندروید:
component/ModalBottomSheet.ktوcomponent/Dialog.kt. .dialog/.sheetفقط درui-design/prototypes/assets/app.css(prototype-only).