UIDex

إيه الفرق؟

الدرج الجانبي أم الورقة السفلية

الفارق هو الحافّة التي يرتكز عليها كلٌّ منهما، وهذا يقرّر كل شيء بعده. الدرج يرتكز على حافّة جانبية، فارتفاعه كامل وعرضه محدود، ويناسب الشاشات العريضة. الورقة السفلية ترتكز على الحافّة السفلية، فعرضها كامل وارتفاعها متدرّج، وتقع في متناول الإبهام على الهاتف.

اسأل نفسك سؤالاً واحداً

الشاشة اللي بتصمّم لها عريضة ولا الإبهام هو اللي هيوصل؟

المشاريع
inert
RTLالحافّة المرتكِزة نفسها تنقلب، والسحب معها

الدرج الجانبي

Drawer / Side Panel
role="dialog" / inset-inline-start

استخدمه لما

مرشّحات جانبية، أو سلّة تسوّق، أو لوحة تفاصيل على سطح المكتب حيث المساحة الأفقية متاحة والسياق خلفه يجب أن يبقى مرئياً.

المدخل الكامل
٩:٤١

المطاعم القريبة

١٢ مكاناً حولك

RTLاسحب المقبض. الحركة رأسية فلا تنعكس، لكن «إلغاء / تمّ» ينعكسان

الورقة السفلية

Bottom Sheet
BottomSheetDialog / .presentationDetents

استخدمه لما

اختيار أو إجراء على الهاتف: قائمة مشاركة، منتقي خيارات، تفاصيل مختصرة. الارتفاع المتدرّج يسمح بحجم يناسب المحتوى.

المدخل الكامل

الخطأ الكلاسيكي

درج جانبي يُعرض كما هو على الموبايل فيغطّي الشاشة كلها. النتيجة نافذة حوارية بلا مزايا النافذة الحوارية، وبإيماءة إغلاق في الاتجاه الخطأ.

مقارنات أخرى