SDAIA UI مجموعة واحدة من المكوّنات تتكيّف مع حجم الشاشة. تتبدّل رموز المسافات والخطوط تلقائيًا بين قيم الحاسوب والجهاز اللوحي والهاتف، وتعيد المكوّنات ترتيب نفسها وفق العرض المتاح لها. ولا حاجة إلى تخطيطات خاصة بالهاتف إلا حيث تتغيّر طريقة التفاعل نفسها: التنقّل والجداول والنوافذ المنبثقة ومنتقيات التاريخ.
نطاق المنصّة ومستوى الدعم
- المنصّة: تستهدف SDAIA UI تطبيقات الويب المتجاوبة في المتصفحات الحديثة على الحاسوب والجهاز اللوحي والهاتف. مكتبات iOS وAndroid الأصلية خارج النطاق ما لم تطلبها سدايا.
- مستوى الدعم للمنتجات الداخلية: الحاسوب أولًا، ودعم كامل للجهاز اللوحي، والهاتف للمهام الرئيسية مثل الموافقات والإشعارات والاستعلامات.
| الشاشة | مستوى الدعم |
|---|---|
| الحاسوب | الهدف الأساسي. تُصمَّم كل الرحلات وتُختبر هنا أولًا. |
| الجهاز اللوحي | دعم كامل. تعمل كل الرحلات بقيم رموز الجهاز اللوحي. |
| الهاتف | المهام الرئيسية: الموافقات والإشعارات والاستعلامات. قد تُبسَّط رحلات إدخال البيانات الطويلة أو تقتصر على الحاسوب. |
نقاط التوقف
هناك ثلاث نقاط توقف معتمدة، وهي نفسها في Figma (أوضاع Desktop وTablet وMobile في متغيّرات المسافات والخطوط)، وفي رموز التصميم، وفي أنماط CSS التي تثبّتها أداة سطر الأوامر.
| الفئة | عرض الشاشة |
|---|---|
| الهاتف | أقل من 768px |
| الجهاز اللوحي | من 768px إلى 1279px |
| الحاسوب | 1280px فأكثر |
في Figma، ارسم إطارات الجهاز اللوحي بعرض 768px أو أكثر. الإطار الأضيق من 768px يُعرض في الشيفرة بقيم الهاتف.
ما يتبدّل تلقائيًا
أنماط CSS التي يثبّتها الأمر init تبدأ بالهاتف: قيم الهاتف هي الافتراضية، وتبدّل استعلامات الوسائط عند 768px و1280px إلى قيم الجهاز اللوحي والحاسوب. تتغيّر المسافات وأحجام الخطوط وارتفاعات الأسطر، ولا تحتاج إلى إضافة أي صنف: كل مكوّن وكل صنف مبني على هذه الرموز (p-spacing-xl وgap-spacing-2xl وtext-text-md…) يتبع عرض الشاشة.
تُثبَّت هذه الأنماط بدءًا من الإصدار 1.7.0 من أداة سطر الأوامر sdaia-ui. إن أُعدّ مشروعك بإصدار أقدم فشغّل init مرة أخرى: يضيف كتلة الرموز المتجاوبة إلى ملف CSS العام دون أن يمسّ مكوّناتك.
npx sdaia-ui@latest init
أحجام الخطوط وارتفاعات الأسطر (الحاسوب / الجهاز اللوحي / الهاتف):
| الرمز | حجم الخط · ارتفاع السطر |
|---|---|
| display-2xl | 72px / 56px / 48px · 90px / 72px / 64px |
| display-xl | 60px / 48px / 40px · 72px / 64px / 56px |
| display-lg | 48px / 36px / 32px · 60px / 48px / 40px |
| display-md | 36px / 30px / 24px · 44px / 40px / 32px |
| display-sm | 30px / 24px / 20px · 38px / 32px / 28px |
| display-xs | 24px / 20px / 18px · 32px / 28px / 24px |
| text-xl | 20px / 18px / 16px · 30px / 26px / 24px |
| text-lg | 18px / 16px / 14px · 28px / 24px / 20px |
| text-md | 16px / 14px / 12px · 24px / 20px / 18px |
| text-sm | 14px / 12px / 10px · 20px / 16px / 14px |
| text-xs | 12px / 10px / 8px · 18px / 14px / 12px |
| text-2xs | 10px / 8px / 8px · 14px / 12px / 10px |
المسافات (الحاسوب / الجهاز اللوحي / الهاتف):
| الرمز | القيمة |
|---|---|
| spacing-xxs | 2px / 2px / 2px |
| spacing-xs | 4px / 4px / 4px |
| spacing-sm | 8px / 6px / 6px |
| spacing-md | 8px / 8px / 8px |
| spacing-lg | 12px / 12px / 8px |
| spacing-xl | 16px / 12px / 12px |
| spacing-2xl | 20px / 16px / 12px |
| spacing-3xl | 24px / 20px / 16px |
| spacing-4xl | 32px / 24px / 20px |
| spacing-5xl | 40px / 32px / 24px |
| spacing-6xl | 48px / 40px / 32px |
| spacing-7xl | 64px / 48px / 40px |
| spacing-8xl | 80px / 64px / 48px |
| spacing-9xl | 96px / 80px / 64px |
| spacing-10xl | 128px / 96px / 80px |
| spacing-11xl | 160px / 128px / 96px |
أحجام الأيقونات ونصف القطر وسماكة الحدود والألوان لا تتغيّر بين أحجام الشاشات.
- لا تُضِف الصنفين
viewport-mobileأوviewport-tabletبنفسك، فاستعلامات الوسائط تبدّل القيم عند العرض الصحيح. - لا تُضِف تصغيرات خاصة بك للهاتف (مثل
text-sm md:text-md) فوق الرموز، فالرموز تتصغّر من تلقاء نفسها.
نقاط توقف Tailwind في شيفرة التخطيط
في Tailwind خمس بادئات لنقاط التوقف، اثنتان منها هما نقطتا التوقف المعتمدتان، واستخدم البقية فقط لضبط التخطيط داخل الفئة الواحدة. لا تتغيّر الرموز عند 640 أو 1024 أو 1536px.
| البادئة | المعنى |
|---|---|
| sm (640px) | داخل فئة الهاتف: الهواتف الكبيرة بالوضع الأفقي. للضبط الدقيق فقط. |
| md (768px) | بداية الجهاز اللوحي، وهي نقطة توقف الرموز نفسها. |
| lg (1024px) | داخل فئة الجهاز اللوحي: الأجهزة اللوحية الكبيرة والحواسيب الصغيرة. للضبط الدقيق فقط. |
| xl (1280px) | بداية الحاسوب، وهي نقطة توقف الرموز نفسها. |
| 2xl (1536px) | داخل فئة الحاسوب: الشاشات العريضة. للضبط الدقيق فقط. |
<main className="mx-auto w-full max-w-[1216px] px-4 md:px-8"> <div className="grid grid-cols-4 gap-4 md:grid-cols-6 md:gap-8 xl:grid-cols-12 xl:gap-6"> <section className="col-span-4 md:col-span-6 xl:col-span-8">…</section> <aside className="col-span-4 md:col-span-6 xl:col-span-4">…</aside> </div> </main>
// نقاط التوقف نفسها في JavaScript const isTabletUp = window.matchMedia('(min-width: 768px)').matches; const isDesktop = window.matchMedia('(min-width: 1280px)').matches;
راجع صفحة تخطيطات الشبكة لمعرفة شبكة الأعمدة في كل فئة.
الهاتف اليوم وما هو مخطَّط
اليوم، على الهاتف، تعيد المكوّنات ترتيب نفسها: تأخذ الحقول والتنبيهات ورفع الملف والبطاقات العرض الكامل، ويلتفّ النص، وتصغر قيم الرموز. وبعض المكوّنات تبدّل تخطيطها تلقائيًا: يتحوّل منتقي التاريخ وترويسة التنقّل إلى الشكل المضغوط تحت 1024px. ولبعض المكوّنات خاصية mobile تضبطها بنفسك: الجدول والنافذة المنبثقة وترقيم الصفحات وترويسة التقويم وإجراءات ترويسة التنقّل.
التخطيطات الخاصة بالهاتف التي تتبدّل تلقائيًا مخطَّطة للمواضع التي تتغيّر فيها طريقة التفاعل:
- التنقّل: زر قائمة أو شريط سفلي.
- الجداول: بطاقات متراصّة أو قائمة بدل التمرير الأفقي.
- النوافذ المنبثقة: ملء الشاشة أو لوحة سفلية.
- منتقي التاريخ وعوامل التصفية: ملء الشاشة.
إلى أن تتوفّر هذه التخطيطات، تتمرّر الجداول العريضة أفقيًا داخل حاويتها، وتظهر النوافذ المنبثقة بطاقاتٍ في المنتصف تملأ عرض الهاتف.
قاعدة 360px
يجب أن يتّسع كل مكوّن وكل صفحة لشاشة بعرض 360px دون أن تتمرّر الصفحة أفقيًا. المحتوى الذي لا يمكن تصغيره، مثل جدول عريض أو مثال شيفرة، يتمرّر داخل حاويته. تجنّب العروض الثابتة والحد الأدنى للعرض، واستخدم w-full وmax-w-* وmin-w-0 ليتمكّن المحتوى من التقلّص.
المكوّنات الأساسية بنظرة سريعة
| المكوّن | على الهاتف اليوم |
|---|---|
| إدخال النص | يأخذ عرض محتواه، أو عرض الحاوية كاملًا مع fullWidth. يتبع النص والحشوات رموز التصميم. |
| منطقة النص | بعرض الحاوية كاملًا، ويمكن للمستخدم تغيير ارتفاعها. |
| القائمة المنسدلة للاختيار | بعرض الحاوية كاملًا. تُختصر القيم الطويلة، وتتمرّر قائمة الخيارات. |
| منتقي التاريخ | يتحوّل تلقائيًا إلى تقويم مضغوط بشهر واحد تحت 1024px. مخطَّط: منتقٍ بملء الشاشة على الهاتف. |
| النافذة المنبثقة | في المنتصف بعرض أقصاه 600px، مع هامش على الشاشات الصغيرة. تتراصّ الأزرار عموديًا تحت 768px. مخطَّط: ملء الشاشة أو لوحة سفلية على الهاتف. |
| الجدول | يتمرّر أفقيًا داخل حاويته حين لا تتّسع الأعمدة. مخطَّط: بطاقات متراصّة على الهاتف. |
| التبويبات الأفقية | تتقاسم التبويبات عرض الصف. لا يوجد تمرير بعد، فاكتفِ بعدد قليل من التسميات القصيرة على الهاتف. |
| ترويسة التنقّل | تتحوّل تلقائيًا إلى ترويسة مضغوطة بزر قائمة تحت 768px. |
| ترقيم الصفحات | يلتفّ إلى سطر جديد عند الحاجة. الخاصية mobile تعرض أرقام صفحات أقل (تضبطها بنفسك). |
| رفع الملف | بعرض الحاوية كاملًا. تُختصر أسماء الملفات ويلتفّ سطر الحالة. |
| التنبيهات | بعرض الحاوية كاملًا. تحت 768px يلتفّ النص وتنتقل الإجراءات إلى سطر مستقل. |
| الزر | يأخذ عرض تسميته، أو العرض الكامل مع fullWidth. يتبع النص والحشوات رموز التصميم. |
| البطاقة | بعرض عمودها كاملًا، و250px على الأقل. ضع البطاقات في شبكة يتغيّر عدد أعمدتها في كل فئة. |
في صفحة كل مكوّن قسم السلوك المتجاوب بالصفوف الثلاثة نفسها: الحاسوب (1280px فأكثر)، والجهاز اللوحي (768–1279px)، والهاتف (أقل من 768px)، مع ما هو مخطَّط.
قائمة الاختبار
تمت المراجعة بعرض 360 و768 و1280 و1440px.
لا تمرير أفقي للصفحة عند 360px.
تمت المراجعة عند تكبير المتصفح 200%.
تمت المراجعة بالإنجليزية (LTR) والعربية (RTL).
تمت المراجعة في السمتين الفاتحة والداكنة.
مساحات اللمس للإجراءات الرئيسية على الهاتف 44 × 44px على الأقل.