النوافذ والطبقات
"@truvar-ai/design-system"النوافذ والطبقات
الطبقات تحبس التركيز أثناء فتحها، وتُغلق بمفتاح Esc، وتعيد التركيز إلى ما فتحها.
نافذة حوار
مبني على DialogTrigger + Modal
يبقى التركيز داخل النافذة ويعود إلى الزر عند الإغلاق. يغلقها مفتاح Esc.
تأكيد
مبني على Modal + Dialog
للإجراءات المهمة القابلة للتراجع. زر التأكيد يكرر اسم الإجراء.
تأكيد الحذف
مبني على Modal + Dialog (alertdialog)
للإجراءات التي لا يمكن التراجع عنها: يكتب الشخص الاسم لتفعيل الزر، والضغط خارج النافذة لا يغلقها.
نافذة كبيرة
مبني على Modal
أعرض على الحاسوب وبملء الشاشة على الهاتف، والنوافذ الصغيرة تصبح أوراقًا سفلية على الهاتف.
لوحة جانبية
مبني على Modal (start / end)
تُفتح من بداية الشاشة أو نهايتها، فتنعكس في العربية. شاهد المثال الكامل بأسلوب HubSpot في لوحة السجل.
ورقة منزلقة
مبني على SheetTrigger + SheetOverlay + Sheet
تنزلق من أي حافة ويمكن سحبها للإغلاق على الشاشات اللمسية. نقاط التثبيت تسمح للورقة السفلية بالتوقف في منتصف الطريق.
نافذة منبثقة
مبني على DialogTrigger + Popover + OverlayArrow
غير مقيدة: لشرح قصير بجوار ما تشرحه.
قائمة
مبني على MenuTrigger + Menu + SubmenuTrigger
أقسام ومجموعة اختيار واحد وقائمة فرعية. اكتب حرفًا للانتقال.
تلميح
مبني على TooltipTrigger
يظهر عند المرور بالمؤشر وعند التركيز بلوحة المفاتيح.