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

دیالوگ و برگه پایین

وضعیت​

هدفِ 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).

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

کتابخانهٔ زندهٔ دیالوگ