الخط الزمني وخطوات التقدّم لـ Angular | ng-hub-ui-milestones
مكوّن خط زمني وخطوات تقدّم لـ Angular: عمودي أو أفقي، وعُقد قابلة للتخصيص بالكامل، ومحتوى داخل كل خطوة وبجانبها، منسّق بمتغيرات CSS.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
اختر مكوّن الخط الزمني هذا لـ Angular عندما تحتاج إلى متتبّع تقدّم تقديمي — تدفقات الإعداد الأولي، وتتبّع الطلبات، وخرائط الطريق — مع عُقد مخصّصة وتخطيطات عمودية وأفقية معًا.
التثبيت
npm install ng-hub-ui-milestonesانتقل إلى
مثالي لـ
- تدفقات الإعداد الأولي
- تتبّع الطلبات
- خرائط الطريق
- خطوات العمليات
حول milestones
يرتّب ng-hub-ui-milestones سلسلة من الخطوات المتصلة بمسار، عموديًا أو أفقيًا. كل عقدة قابلة للتخصيص بالكامل — رقم أو أيقونة أو avatar أو أي ترميز داخل الدائرة، إضافة إلى محتوى غني بجانبها — وكل لون وحجم وموصّل هو متغيّر CSS، لذا يُعاد تنسيقه في وقت التشغيل.
أدلّة الميزات
الاتجاه
رتّب الجدول الزمني رأسياً (الافتراضي، مثالي للمعالجات وخلاصات النشاط) أو أفقياً (خطوات تقدّم عبر أعلى الصفحة). وتُرقَّم العقد تلقائياً بترتيب DOM.
أمثلة:
خط زمني عمودي
خط زمني عمودي
Information
Account details captured and verified.
Shipping
Delivery address confirmed.
Payment
Enter your payment method to continue.
Review
Place the order once everything looks right.
خطوات تقدّم أفقية
خطوات تقدّم أفقية
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
حالات العقدة
يحمل كل `hub-milestone` خاصية `state` — complete أو active أو pending أو error — تقود ألوان العقدة والموصّل. ويعرض مُدخل `label` نصاً بديلاً داخل الدائرة.
أمثلة:
حالات العقدة
حالات العقدة
Complete
A finished step.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
عُقد مخصّصة وتنسيق السمات
أسقط أي محتوى داخل الدائرة عبر `<ng-template hubMilestoneNode>` (أرقام وأيقونات ورموز تعبيرية وصور رمزية)، أو تجاوز عقدة واحدة عبر `color`، أو أعد تنسيق الجدول الزمني بأكمله عبر متغيرات `--hub-milestone-*` في CSS.
أمثلة:
عُقَد مخصصة ولون لكل عُقدة
عُقَد مخصصة ولون لكل عُقدة
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
تنسيق السمات عبر متغيرات CSS
تنسيق السمات عبر متغيرات CSS
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
الحركة
عند ظهور المخطط الزمني في إطار العرض، يُكمل مساره حتى العقدة النشطة — مُفعّل افتراضيًا وقابل للضبط عالميًا عبر `provideHubMilestones`. أضِف `[pulse]` لجعل العقدة النشطة تُصدر موجة لطيفة. كلتا الحركتين تحترمان `prefers-reduced-motion`.
أمثلة:
أفقي مع نبض العقدة النشطة
أفقي مع نبض العقدة النشطة
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.
الميزات الرئيسية
التغييرات الأخيرة
Version 21.0.0 - 6/14/26, 12:00 AM
added: Initial release: hub-milestones container (vertical / horizontal orientation, auto-numbered nodes) and hub-milestone node with complete/active/pending/error states.
added: Per-node color override, label fallback and custom in-circle content via the hubMilestoneNode template directive.
added: Full --hub-milestone-* CSS-variable theming for node, connector, states and spacing.