مكونات React لكود المنصات

زر React متاح الوصول للمنصات الحكومية السعودية: تسعة أنماط، أحجام، أيقونات، حالة تحميل، وخاصية asChild لروابط التوجيه. جاهز للعربية والوضع الداكن.

زر إجراء عائم (FAB) في React للإجراء الرئيسي الوحيد في الشاشة: أيقونة فقط أو حبة ممتدة، على سطح عادي أو ملون، مع asChild للروابط. يراعي الاتجاه من اليمين إلى اليسار.

رابط نصي متاح الوصول في React، بـ 3 درجات وحجمين، مع وضع مضمن ووضع خارجي للمواقع الحكومية السعودية. تنعكس أيقونته النهائية في الاتجاه من اليمين إلى اليسار.

زر تبديل ثنائي الحالة في React لأشرطة الأدوات وأدوات التنسيق، بأنماط وأحجام. يعرض aria-pressed ويدعم الاستخدام بأيقونة فقط مع تسمية.

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

حقل نصي أحادي السطر متاح الوصول في React مع تسمية مدمجة ونص مساعد ورسالة خطأ وبادئات ولاحقات وأنماط تعبئة. جاهز للعربية والاتجاه من اليمين إلى اليسار.

حقل نصي متعدد الأسطر متاح الوصول في React يشارك TextInput عقد التسمية والنص المساعد والخطأ، مع rows والتحكم في تغيير الحجم وأنماط التعبئة.

حقل رقمي في React بأزرار زيادة ونقصان، مع min، max، step، ودعم الكسور. يحمل رقماً أو null، ويربط التسمية وحالات الخطأ. يبقى من اليسار إلى اليمين في العربية.

حقل اختيار مفرد متاح الوصول في React مبني على Radix، مع تسمية، نص مساعد، حالة خطأ، نص نائب، وخيارات معطلة. يرث الوضع الداكن والاتجاه من اليمين إلى اليسار.

حقل قائمة منسدلة في React باختيار مفرد ومتعدد، بحث داخل اللوحة، خيارات مجمعة، وربط كامل للحقل. مبني على cmdk للتصفية السريعة بالعربية والإنجليزية.

مربع اختيار متاح الوصول في React يدعم التسمية، النص المساعد، حالة الخطأ، الحالة غير المحددة، وثلاثة أحجام. مبني على Radix، مربوط بالنماذج، وجاهز للاتجاه العربي.

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

مفتاح تبديل متاح الوصول في React لإعداد ثنائي واحد يسري فوراً، مع تسمية ونص مساعد وحالات. مبني على Radix ومعكوس في الاتجاه من اليمين إلى اليسار.

شريط تمرير متاح الوصول في React لقيمة واحدة أو نطاق بمقبضين، مع عرض حي للقيمة وتنسيق مخصص وأحجام وربط للحقل. يعمل بلوحة المفاتيح وفي الاتجاه من اليمين إلى اليسار.

تقييم بالنجوم متاح الوصول في React، يصلح حقلاً للإدخال أو عرضاً للقراءة فقط: دقة نصف نجمة، أحجام، درجة العلامة، ودعم كامل للوحة المفاتيح.

حقل رمز تحقق لمرة واحدة في React لتسجيل الدخول والتحقق: رموز رسائل نصية من 6 خانات، تجميع الخانات، رقم سري مقنّع، لصق، تعبئة تلقائية، وonComplete.

حقل وسوم في React يحول النص المكتوب إلى شرائح قابلة للإزالة، مع تحقق وحد أقصى ومنع التكرار وربط للحقل. يعمل بلوحة المفاتيح وبالعربية.

حقل بحث في React مبني على TextInput: عدسة، بحث صوتي، زر مسح، وEnter للبحث. يناسب التصفية الحية وصفحات البحث الكاملة.

مكون رفع ملفات في React بالسحب والإفلات، مع التحقق من النوع والحجم، حالة وتقدم لكل ملف، ونمط زر مضغوط. خاضع للتحكم بالكامل وجاهز للاتجاه العربي.

منتقي تاريخ متاح الوصول في React يدعم التبديل داخل التقويم بين الهجري (أم القرى) والميلادي، الحدين الأدنى والأقصى، والعربية. القيمة دائماً Date.

منتقي نطاق تاريخ متاح الوصول في React لتاريخي البداية والنهاية على تقويم واحد. يدعم الإعدادات الجاهزة، العرضين الهجري والميلادي، والحدود، ويشارك DatePicker نواته.

شريحة قابلة للاختيار في React لأشرطة التصفية، قوائم الاختيار المتعدد، والرموز القابلة للإزالة. تدعم الأنماط، الأيقونات، والشكل الدائري، وتعرض aria-pressed.

سطح بطاقة مركب في React يضم الصورة، الأيقونة، الرأس، المحتوى، التذييل، والأقسام القابلة للتوسيع. يوفر نمطاً قابلاً للاختيار وآخر تفاعلياً للوحات التحكم والبوابات.

وسم مضغوط في React للفئات والكلمات المفتاحية، بمجموعة درجات SDGA وثلاثة أحجام وأيقونات ووضع قابل للإزالة. جاهز للاتجاه العربي.

حبة حالة في React بنقطة ملونة وتسمية لحالات الطلبات والإجراءات: نجاح وتحذير وخطأ ومعلومة ومحايد، بأنماط معبأة أو خفيفة.

صورة رمزية في React تدعم الصورة، بديل الأحرف الأولى، الأحجام، الأشكال، نقطة الحالة، والمجموعات المتراصة مع عداد فائض +N. الاسم المتاح الوصول مدمج.

فاصل في React للفصل الأفقي أو العمودي، مع تسمية مضمنة اختيارية، درجات، ووضع زخرفي. يستخدم الدور separator.

قائمة مفتاح وقيمة في React تعرض عناصر dl، dt، وdd الحقيقية لشاشات المراجعة والملخص. تأتي أفقية أو عمودية، وتدعم القيم الغنية والعربية.

مكون قائمة في React للقوائم النقطية، المرقمة، والأيقونية، مع إيقاع متسق، تداخل، درجات، وترقيم أبجدي عربي في الاتجاه من اليمين إلى اليسار.

قائمة منظمة خفيفة في React لصفوف الترويسة والنص، مع صفوف قابلة للاختيار وكثافة مضغوطة ودون عبء الفرز. تعرض جدولاً حقيقياً.

بطاقة مؤشر أداء في React فيها تسمية، قيمة، مقدار تغير، اتجاه، مخطط مصغر اختياري، أيقونة، وفتحات إجراء. اجمع البطاقات في MetricGroup للوحات التحكم.

اقتباس بارز في React: عنوان اختياري، مؤلف، صفة المؤلف، صورة رمزية، أحجام، وتلوينات. يعرض عنصر blockquote الدلالي.

مخطط زمني عمودي في React لسجل الطلبات وتتبع المعاملات وموجز النشاط، بعلامات حالة وأيقونات وصور رمزية. يستخدم دلالات القائمة المرتبة.

جدول بيانات مركب في React برأس وجسم وتذييل وتعليق وترويسات قابلة للفرز والتصفية وصفوف قابلة للاختيار وأحجام وتلوين متناوب للصفوف وترويسة ثابتة.

حاوية نسبة أبعاد في React تثبت المحتوى على نسبة مثل 16/9، مما يمنع الصور، الخرائط، والتضمينات من إزاحة التخطيط أثناء التحميل.

مكون DigitalStamp للمواقع الحكومية السعودية في React: شريط العلم والعبارة، ولوحة شرح نطاق .gov.sa، ورقم تسجيل الهيئة، بالعربية والإنجليزية.

كتلة كود في React تدعم تبويبات اللغات، أرقام الأسطر، زر النسخ، طي "عرض المزيد"، والنمط المضمن. يبقى الكود من اليسار إلى اليمين في الصفحات العربية.

مكون SaudiRiyal في React يعرض رمز الريال الرسمي بتنسيق مبالغ متوافق مع SDGA: موضع ثابت للرمز، إشارة سالب صحيحة في الاتجاه من اليمين إلى اليسار، أرقام، ودرجات.

مخططات بيانية SVG في React بلا اعتماديات، تستخدم لوحة ألوان الهيئة الفئوية: BarChart، LineChart، وPieChart. لكل مخطط جدول بديل متاح الوصول ودعم للاتجاه العربي.

تنبيه مضمن في React للرسائل داخل الصفحة: أنواع المعلومة، النجاح، التحذير، والخطأ، مع عنوان، إجراءات، وزر إغلاق. تعلنه التقنيات المساعدة عبر المناطق الحية.

شريط إشعار بعرض كامل في React لرسائل النظام في أعلى الصفحة: أنواع دلالية، عبارة افتتاحية بارزة، إجراءات، وزر إغلاق. جاهز للاتجاه العربي.

إشعارات منبثقة في React تظهر عند استدعاء دالة toast(): أنماط، إجراءات مثل التراجع، تحديث في المكان، ومنفذ عرض واحد قرب جذر التطبيق.

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

مؤشر تحميل غير محدد في React يتبع حجم النص ولونه الحاليين، بأحجام ودرجات وتسمية متاحة افتراضياً.

عنصر نائب في React يحاكي شكل المحتوى أثناء التحميل: أسطر نص ودوائر وبطاقات وأشكال مضمنة، بلمعان يحترم تفضيل تقليل الحركة.

شريط تقدم خطي وحلقة تقدم دائرية في React: حالة محددة وغير محددة، حالات تغذية راجعة، تسمية، نص مساعد، وعرض للقيمة.

مكون حالة فارغة في React لشاشات بلا بيانات أو بلا نتائج ولشاشات الخطأ، مع وسائط، عنوان، وصف، وإجراءات، أو أجزاء قابلة للتركيب. جاهز للاتجاه العربي.

حوار منبثق متاح الوصول في React مبني على Radix: أيقونة رأس، عنوان، وصف، جسم، إجراءات تذييل، أحجام، حصر للتركيز، وEscape للإغلاق. يرث السمة والاتجاه.

لوح في React ينزلق من بداية السطر أو نهايته أو من الأسفل، للإعدادات، لوحات التفاصيل، ونماذج التصفية. يدير التركيز كما يديره Modal، وتراعي جوانبه الاتجاه من اليمين إلى اليسار.

لوحة منبثقة في React مبنية على Radix لمحتوى غني مثبت على مشغل: نماذج تحرير مضمنة، مرشحات، ومعاينات، مع سهم اختياري وحصر للتركيز في وضع modal.

لوحة تنقل منزلقة في React برأس وعناصر مجمعة وروابط الصفحة الحالية وتذييل، بدلالات nav وقوائم حقيقية. ينعكس الجانب في الاتجاه من اليمين إلى اليسار.

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

شريط قوائم أفقي بأسلوب سطح المكتب في React مبني على Radix، مع قوائم متداخلة، عناصر مربعات اختيار وأزرار اختيار، ومشغلات محددة. تتنقل مفاتيح الأسهم بين القوائم وداخلها.

لوحة مرشحات متعددة الأوجه في React، منبثقة أو مضمنة، مع أقسام، مرشحات بمربعات اختيار، عداد نتائج، وزري التطبيق والمسح. تبقى الحالة في كودك.

لوحة أوامر في React مبنية على cmdk، تدعم البحث التقريبي، المجموعات، الاختصارات، وCommandDialog الذي يربط Cmd+K وCtrl+K. تعمل مضمنة أو منبثقة.

تبويبات متاحة الوصول في React مبنية على Radix بقائمة تبويب متنقلة وأيقونات وأنماط بعرض كامل ومسطحة ومعالجة للفائض وتسميات عربية. تنقل مفاتيح الأسهم التركيز بين التبويبات.

مسار تنقل متاح الوصول في React يدعم الروابط، الصفحة الحالية، الفواصل المخصصة، وطي العناصر الوسطى. يستخدم معلم nav وaria-current.

ترقيم صفحات متاح الوصول في React: زرا السابق والتالي، روابط الصفحات، صفحة حالية بشريط سفلي، علامات حذف، ودالة paginationRange المساعدة لعرض ثابت.

أكورديون متاح الوصول في React مبني على Radix، يفتح قسماً واحداً أو عدة أقسام، ويوفر الوضع القابل للطي، الأحجام، محاذاة الأيقونة، والنمط المسطح. جاهز للاتجاه العربي.

مؤشر خطوات في React للتدفقات متعددة الخطوات: حالات الخطوة (مكتملة، حالية، قادمة)، تخطيط أفقي أو عمودي، ومظهر نقطي. يحدد الخطوة الحالية لقارئ الشاشة.

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

منطقة تمرير في React بأشرطة تمرير منسقة في كل المتصفحات، للمحور العمودي أو الأفقي أو كليهما. تحتاج إلى أبعاد محددة كما في overflow الأصلي، وتقبل التمرير بلوحة المفاتيح حين تحمل اسماً.

عرض شرائح متاح الوصول في React يدعم الأسهم، النقاط، لوحة المفاتيح، السحب، والتكرار، ويتبع نموذج الدور carousel مع إعلانات حية. تنقل يراعي الاتجاه من اليمين إلى اليسار.

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

يمثل DgaProvider جذر كل تطبيق @dev-dga: يضبط الاتجاه، الوضع الداكن، وسمة العلامة، ويستضيف البوابة لترث الطبقات المنبثقة هذه الإعدادات. غلف به تطبيقك مرة واحدة.