مكوّن Stepper لـ Angular | ng-hub-ui-stepper
مكوّن stepper لـ Angular مع التحقق وأوضاع الاتجاه وعناصر تحكّم مخصّصة وتعريب وتنسيق عبر متغيرات CSS.
Overview
Why teams search for this library
يكون مكوّن stepper هذا لـ Angular مفيدًا للتدفقات الموجّهة متعددة الخطوات حيث يحتاج التحقق وقواعد التقدّم والعلامة التجارية إلى البقاء تحت سيطرتك.
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- تدفقات الدفع
- نماذج المعالج
- الإعداد الأولي
- خطوات التهيئة
About stepper
يساعد ng-hub-ui-stepper تطبيقات Angular على هيكلة الإعداد الأولي والدفع والنماذج بنمط المعالج. يمنح الفرق طريقة قابلة لإعادة الاستخدام للتحكّم في التقدّم بين الخطوات والتحقق ومنطق التنقّل دون تضمين تلك القواعد يدويًا في كل تدفق.
Feature guides
الاستخدام الأساسي
الإعداد الأساسي وسلوك الاتجاه.
Examples:
الاستخدام الأساسي
الاستخدام الأساسي
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
الاتجاه
الاتجاه
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
تدفّقات متقدمة
التحقق، و i18n، و RTL، والتنقل المُدار بواسطة API، وعناصر التحكم المخصصة، ورؤوس الخطوات المخصصة.
Examples:
التحقّق
التحقّق
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
تحكّم برمجي
تحكّم برمجي
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
تنقّل مخصص
تنقّل مخصص
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
عناصر تحكّم مخصصة
عناصر تحكّم مخصصة
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
الحركات
الحركات
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
التدويل (i18n)
التدويل (i18n)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
من اليمين إلى اليسار (RTL)
من اليمين إلى اليسار (RTL)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
التنسيق
تخصيص المظهر في وقت التشغيل من خلال خدمة المظهر.
Examples:
تنسيق السمات
تنسيق السمات
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Key features
Recent changes
Version 21.2.0 - 3/19/26, 12:00 AM
added: StepperAnimationDirection enum exported for typed animation direction values.
added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.
changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.
changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.
changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.
changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.
removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.
removed: [index] template binding removed from StepComponent — managed internally.
Version 21.1.0 - 3/18/26, 12:00 AM
added: Angular 21 support with Signals-based architecture.
added: contentChild and contentChildren for step and directive discovery.
changed: All components and directives converted to standalone.
fixed: Fixed step indices and validation during dynamic step additions.