الخط الزمني وخطوات التقدّم لـ Angular | ng-hub-ui-milestones
مكوّن خط زمني وخطوات تقدّم لـ Angular: عمودي أو أفقي، وعُقد قابلة للتخصيص بالكامل، ومحتوى داخل كل خطوة وبجانبها، منسّق بمتغيرات CSS.
مرجع API
إليك العقد الكامل لـ milestones: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط milestones عبر 6 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | اتجاه تخطيط الخط الزمني. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | الحالة المرئية للعقدة؛ تتحكم في ألوان العقدة والموصّل. |
color (hub-milestone) | string | '' | تجاوز لون لكل عقدة (أي لون CSS). يتغلّب على لون الحالة. |
label (hub-milestone) | string | '' | نص بديل يظهر داخل العقدة عند عدم توفير قالب `hubMilestoneNode`. |
pulse (hub-milestones) | boolean | false | عند تفعيله على `<hub-milestones>`، تُصدر العقدة النشطة موجة لطيفة تتمدد للفت الانتباه إلى الخطوة الحالية. اختياري؛ يحترم `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | عند ظهور المخطط الزمني في إطار العرض، يُحرّك مسار اللون حتى العقدة النشطة. مُفعّل افتراضيًا — اضبطه عالميًا عبر `provideHubMilestones({ reveal: false })` أو لكل نسخة باستخدام `[reveal]`. يحترم `prefers-reduced-motion`. |
المخرجات
لم يتم توثيق أي مخرجات بعد.
القوالب
اجعله خاصاً بك — 2 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
hubMilestoneNode | يحدّد `<ng-template>` يُعرض محتواه داخل دائرة المعلم (رقم، أيقونة، رمز تعبيري، صورة رمزية). يتقدّم على `label` والترقيم التلقائي. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | أي محتوى يُعرض مباشرة داخل `hub-milestone` (خارج قالب العقدة) يظهر كجسم بجوار الدائرة. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
متغيّرات CSS
نسّق كل بكسل عبر 20 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
node
node الدائري: حجمه وألوانه وأسطحه لكل حالة.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | قطر دائرة node. |
--hub-milestone-node-font-size | 1.05rem | length | حجم خط محتوى node (الرقم / التسمية). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | خلفية node لحالتي الاكتمال / النشاط. تتجاوز خاصية `color` لكل node هذا. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | لون محتوى node على العُقَد الملوَّنة. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | خلفية node المعلَّقة. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | لون محتوى node المعلَّقة. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | لون حدود node المعلَّقة. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | خلفية node الخطأ. |
الموصِّل والتخطيط
المسار المرسوم بين العُقَد وتباعد الخط الزمني.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | سُمك مسار الربط. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | تعبئة الموصِّل بين العُقَد المكتملة / النشطة. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | تعبئة الموصِّل المؤدية إلى node معلَّقة. |
--hub-milestone-gap | 1rem | length | الفجوة بين مسار node ومحتوى المتن. |
--hub-milestone-spacing | 1.75rem | length | التباعد بين الخطوات المتتالية. |
المتن
المحتوى النصي المعروض بجانب كل node.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | لون نص المتن الأساسي. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | لون نص المتن الخافت / الثانوي. |
الحركة
اضبط نبضة العقدة النشطة الاختيارية ومسار الكشف عند الدخول إلى إطار العرض.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | لون موجة نبض العقدة النشطة. الافتراضي هو لون العقدة، لذا يتبع أي تجاوز `color` لكل عقدة. |
--hub-milestone-pulse-duration | 1.6s | string | مدة دورة نبض واحدة. |
--hub-milestone-pulse-spread | 0.75rem | length | مدى تمدد موجة النبض للخارج من العقدة. |
--hub-milestone-reveal-duration | 0.5s | string | مدة امتلاء كل موصِّل أثناء الكشف. |
--hub-milestone-reveal-stagger | 0.14s | string | التأخير بين امتلاء الموصِّلات المتتالية، مما يُنشئ الكشف المتتابع. |
التنسيق والسمات
لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.