التبويبات

يتيح مكون ازرار التبديل للمستخدمين التنقل بين أقسام المحتوى المرتبطة دون مغادرة الصفحة الحالية. ويساعد على تنظيم المحتوى في مجموعات منطقية، مما يقلل الحاجة إلى التمرير ويسهّل التركيز على قسم واحد في كل مرة. ويوفر نظام تصميم الشارقة ثلاثة أنماط مختلفة لعلامات التبويب، تؤدي جميعها الوظيفة نفسها مع اختلاف في المعالجة البصرية بما يناسب مختلف واجهات الاستخدام.

متى يُستخدم؟

  • تنظيم المحتوى المرتبط في أقسام منفصلة.
  • تقليل الحاجة إلى التمرير في الصفحات الغنية بالمحتوى.
  • تمكين المستخدمين من التنقل بين العروض أو التصنيفات المختلفة.
  • عرض المعلومات المرتبطة دون الحاجة إلى الانتقال إلى صفحة جديدة.

تُستخدم ازرار التبويب بشكل شائع في صفحات الخدمات، ولوحات التحكم، والوثائق، وصفحات الملف الشخصي، وصفحات الإعدادات.

أنواع ازرار التبويب

1. علامات التبويب القياسية

النمط الافتراضي المستخدم في معظم الخدمات الرقمية، ويوفر مظهرًا بسيطًا ومتوازنًا يناسب التنقل بين أقسام المحتوى.

الاستخدامات الشائعة:

  • صفحات المحتوى
  • عرض الوثائق
  • أقسام المعلومات

الخصائص:

  • تصميم بسيط وواضح
  • حالة نشطة واضحة
  • مناسب لمعظم حالات الاستخدام

تتيح هذه الخدمة للمتعاملين تقديم الطلبات ومتابعتها إلكترونيًا. يُرجى الاطلاع على المتطلبات والرسوم قبل بدء الطلب.

يلزم لاستخدام هذه الخدمة هوية إماراتية سارية، وفاتورة خدمات حديثة، ونموذج طلب مكتمل.

المعالجة الاعتيادية مجانية، وتتوفر المعالجة السريعة مقابل رسوم إضافية قدرها 50 درهمًا.

2. أزرار التبويب السفلية

نمط بسيط يعتمد على خط سفلي لإبراز علامة التبويب النشطة، ويوفر مظهرًا هادئًا مع الحفاظ على وضوح التنقل.

الاستخدامات الشائعة:

  • التنقل الثانوي
  • صفحات الوثائق
  • الصفحات الغنية بالمحتوى

الخصائص:

  • معالجة بصرية مبسطة
  • يتم تمييز العنصر النشط بخط سفلي
  • يركز على المحتوى أكثر من عناصر التنقل

تتيح هذه الخدمة للمتعاملين تقديم الطلبات ومتابعتها إلكترونيًا. يُرجى الاطلاع على المتطلبات والرسوم قبل بدء الطلب.

يلزم لاستخدام هذه الخدمة هوية إماراتية سارية، وفاتورة خدمات حديثة، ونموذج طلب مكتمل.

المعالجة الاعتيادية مجانية، وتتوفر المعالجة السريعة مقابل رسوم إضافية قدرها 50 درهمًا.

3. أزرار التبويب الممتلئة

نمط أكثر بروزًا، حيث يتم تمييز علامة التبويب النشطة بخلفية ممتلئة، ويُستخدم عندما تكون الحاجة إلى إبراز العنصر النشط بشكل أكبر.

الاستخدامات الشائعة:

  • لوحات التحكم
  • الصفحات التعريفية
  • التطبيقات التفاعلية

الخصائص:

  • إبراز بصري مرتفع
  • حالة نشطة واضحة وسهلة التمييز
  • مناسب للواجهات التي تركز على إنجاز المهام

تتيح هذه الخدمة للمتعاملين تقديم الطلبات ومتابعتها إلكترونيًا. يُرجى الاطلاع على المتطلبات والرسوم قبل بدء الطلب.

يلزم لاستخدام هذه الخدمة هوية إماراتية سارية، وفاتورة خدمات حديثة، ونموذج طلب مكتمل.

المعالجة الاعتيادية مجانية، وتتوفر المعالجة السريعة مقابل رسوم إضافية قدرها 50 درهمًا.


مكونات علامات التبويب

  • حاوية أزرار التبويب
  • عناصر أزرار التبويب
  • مؤشر العنصر النشط
  • لوحة المحتوى المرتبطة

السلوك التفاعلي

  • يؤدي اختيار زر تبويب إلى عرض لوحة المحتوى المرتبط بها.
  • يجب أن يكون زر التبويب واحد فقط في الحالة النشطة في كل مرة.
  • يجب أن تكون الحالة النشطة واضحة وسهلة التمييز.
  • ينبغي أن تكون تسميات علامات التبويب مختصرة وواضحة.

إرشادات إمكانية الوصول

  • يجب أن تدعم علامات التبويب التنقل الكامل باستخدام لوحة المفاتيح.
  • استخدم أدوار ARIA المناسبة مثل tablist وtab وtabpanel.
  • احرص على توضيح أزرار التبويب النشطة لتقنيات المساعدة.
  • وفّر حالات تركيز (Focus) واضحة لمستخدمي لوحة المفاتيح.
  • احرص على توفير تباين لوني كافٍ في جميع الأنماط.

السلوك الموصى به في التصميم المتجاوب

  • ينبغي أن تتكيف علامات التبويب بسلاسة مع مختلف أحجام الشاشات.
  • على الشاشات الصغيرة، يمكن أن تصبح علامات التبويب قابلة للتمرير أفقيًا عند ضيق المساحة.
  • يجب أن تبقى التسميات واضحة وسهلة القراءة دون اقتطاع المعلومات المهمة.