دليل المكونات (Styleguide)
مرجع داخلي للفريق: كل حقل ومكوّن نستخدمه في المنصة باسم الكلاس الحرفي المطلوب نسخه.
الحقول
الجدول 3.2 من TASKS.md: كل صف بحقله وكلاسه الحرفي. انسخ الكلاس كما هو دون تعديل.
اختيار مفرد أفقي.form-radio-group
بطاقة اختيار بصورة.form-check.form-check-card
مربعات اختيار.form-check
مفتاح تشغيل.form-check.form-switch
عنوان مسطّرspan.lined-title
بداية القسم الجديد
بطاقة رفع ملف+fileUploadCard
الملفات المقبولة:pdf, png, jpg, jpegالحجم الأقصى:2MB
بحث في جدول.input-group
مجموعة إدخال مع حذف.input-group-end
رسالة خطأ الحقل.invalid-feedback
شارة ميزة خارج النطاق+hlSoon
الربط مع منصة النفاذ الوطنيقريبًا
عناصر قابلة للترتيب.accordion.form-accordion.js-sortable-items
الجداول
غلاف الجدول وترويسته وفلاتره وتذييله، مع الحالات والعمليات والحالة الفارغة.
غلاف الجدول.table-wrapper
| # | المٌعرّف | الخدمة | المستفيد | المرفقات | الحالة | تاريخ التقديم | العمليات |
|---|---|---|---|---|---|---|---|
| 1 | APP-2026-0007 | دعم النقل المدرسي | محمد العتيبي | 3 | قيد المراجعة | 24-6-2026 |
|
| 2 | APP-2026-0008 | صرف العلاج الدوائي | عبدالله الأشمري | 0 | معتمد | 22-6-2026 |
|
| 3 | APP-2026-0009 | تأهيل مهني | خالد القحطاني | 1 | مرفوض | 20-6-2026 |
|
شارات الحالةspan.status.status--*
الحالة الفارغة.empty-section
لا توجد طلبات بعد
ستظهر الطلبات هنا فور تقديمها من بوابة المستفيد.
عرض دليل الخدمات
الإحصاءات
بطاقات الأرقام أعلى الصفحات والرسوم البيانية عبر Chart.js.
شريط إحصاءات.stats-widget
بطاقة إحصاء عبر Mixin+hlStat
بطاقة إحصاء حرفية.single-stats-widget
البطاقة الرئيسية.main-stats-widget
تفصيل الحالات.stats-breakdown-widget
رسم بياني.chart-widget + canvas
الحوارات والتنبيهات
المودالات بأنواعها الخمسة، والمودال متعدد الخطوات، ورسائل Toast، والتنبيه داخل الصفحة.
المودالات+hlModal
شريط تقدم المودال متعدد الخطوات:
span.modal-footer-progress[style="width: 33%"]
رسائل Toast.tt-toast-list__item
القائمة الحقيقية
.tt-toast-list
ثابتة أسفل الشاشة، وتُنشأ تلقائيًا عند استدعاء
Holool.toast(msg, tone). الأمثلة أدناه ساكنة للعرض فقط.
تنبيه داخل الصفحة.alert.alert-warning
السجل والمسار
سجل الإجراءات والخط الزمني وشريط الخطوات والتقدم ومسار المراحل وشريط الالتزام بالزمن.
سجل الإجراءات.action-log
سنقوم بمراجعة البيانات والرد عليك قريبًا.
الخط الزمني.timeline
الإصدار الثاني من الخدمة
منشورتعديل شروط الأهلية
- رفع سقف الدخل الشهري.
- إضافة مرفق التقرير الطبي.
الإصدار الأول من الخدمة
مؤرشفالنسخة الأولى المعتمدة من الخدمة.
شريط التقدم.tt-progress-bar[data-percentage]
مسار المراحل+hlStages
- مكتملة:تقديم الطلب
- مكتملة:التحقق
- 3الاعتماد
- 4التنفيذ
- 5الإغلاق
شريط الالتزام بالزمن+hlSla
شريط الالتزام — متأخر.hl-sla--danger
شريط الخطوات.stepper
مكونات حلول
مكونات مضافة خصيصًا للمنصة، كلها مشتقة من مكونات نظام التصميم ومتغيرات --tt-*.
ملخص الخدمة.hl-equation
ملخص الخدمة
دعم النقل المدرسي-
الفئة المستهدفةطلاب الأسر المستفيدةمكتمل
-
سقف الصرفلم يُحدد بعدناقص
-
رحلة العملرحلة عمل بسيطةافتراضي
الجاهزية للنشر.hl-readiness
الميزانية.hl-budget-bar
منشئ الشروط.hl-rule-group / .hl-rule-row
معاينة الشرط بلغة الأعمال.hl-rule-preview
رمز التحقق.hl-otp
لوحة التوقيع.hl-signature
قمع الطلب.hl-funnel
تقييم بالنجوم.hl-stars
بطاقة قالب.hl-template-card
معاينة المستفيد.hl-preview-frame
دعم النقل المدرسي
منفعة مالية شهرية لتغطية تكلفة نقل الطلاب، تُصرف لتسعة أشهر دراسية.
مكونات أخرى
مكونات نظام التصميم التي نستخدمها في صفحات التفاصيل والإعدادات.
بطاقة عنصر.widget-card
أزواج البيانات.meta-pair
قائمة تحقق.check-list
- يشمل الحق تسعة أشهر دراسية.
- يُصرف عبر حساب المستفيد البنكي.
- يتوقف الصرف عند انقطاع الطالب.
قائمة الميزات.features-list
نموذج التقديم
آخر تحديث قبل يومين
مستند الهوية
إلزامي لكل طلب
قائمة المستخدمين.user-list
عبدالله الشهريمعتمد
نورة القحطانيباحث اجتماعي
محمد العتيبي
19 مارس، 5:14 PMجارٍ مراجعة المعلومات، وسنوافيك بالمستجدات قريبًا.