الخط الزمني وخطوات التقدّم لـ Angular | ng-hub-ui-milestones
مكوّن خط زمني وخطوات تقدّم لـ Angular: عمودي أو أفقي، وعُقد قابلة للتخصيص بالكامل، ومحتوى داخل كل خطوة وبجانبها، منسّق بمتغيرات CSS.
الأنماط
الميكسنات والأنماط
Override the `--hub-milestone-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep their defaults. Token-based and self-contained.
Theming with hub-milestones-theme
Kickoff
Project scoped and approved.
Build
The current step, in progress.
Launch
Not started yet.
| ميكسن | المعاملات | الوصف |
|---|---|---|
| Theming | ||
hub-milestones-theme() | $node-color--hub-milestone-node-color$node-text--hub-milestone-node-text$node-size--hub-milestone-node-size$node-font-size--hub-milestone-node-font-size$connector-bg--hub-milestone-connector-bg$connector-pending-bg--hub-milestone-connector-pending-bg$connector-thickness--hub-milestone-connector-thickness$pending-bg--hub-milestone-pending-bg$pending-border--hub-milestone-pending-border$pending-color--hub-milestone-pending-color$error-bg--hub-milestone-error-bg$body-color--hub-milestone-body-color$body-muted--hub-milestone-body-muted$gap--hub-milestone-gap$spacing--hub-milestone-spacing | One-call token theming for `<hub-milestones>` |
متغيّرات CSS
نسّق كل بكسل عبر 20 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
Milestones
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | لون نص المتن الأساسي. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | string | لون نص المتن الخافت / الثانوي. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | color | تعبئة الموصِّل بين العُقَد المكتملة / النشطة. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | تعبئة الموصِّل المؤدية إلى node معلَّقة. |
--hub-milestone-connector-thickness | 3px | length | سُمك مسار الربط. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | خلفية node الخطأ. |
--hub-milestone-gap | 1rem | length | الفجوة بين مسار node ومحتوى المتن. |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | خلفية node لحالتي الاكتمال / النشاط. تتجاوز خاصية `color` لكل node هذا. |
--hub-milestone-node-font-size | 1.05rem | length | حجم خط محتوى node (الرقم / التسمية). |
--hub-milestone-node-size | 2.75rem | length | قطر دائرة 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-border | var(--hub-sys-border-color-default, #dee2e6) | border | لون حدود node المعلَّقة. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | لون محتوى node المعلَّقة. |
--hub-milestone-spacing | 1.75rem | length | التباعد بين الخطوات المتتالية. |
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | لون موجة نبض العقدة النشطة. الافتراضي هو لون العقدة، لذا يتبع أي تجاوز `color` لكل عقدة. |
--hub-milestone-pulse-duration | 1.6s | transition | مدة دورة نبض واحدة. |
--hub-milestone-pulse-spread | 0.75rem | length | مدى تمدد موجة النبض للخارج من العقدة. |
--hub-milestone-reveal-duration | 0.5s | transition | مدة امتلاء كل موصِّل أثناء الكشف. |
--hub-milestone-reveal-stagger | 0.14s | string | التأخير بين امتلاء الموصِّلات المتتالية، مما يُنشئ الكشف المتتابع. |