مرجع API

إليك العقد الكامل لـ stepper: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط stepper عبر 6 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`options (hub-stepper)`	`StepperOptions`	`{}`	كائن إعداد stepper: `layout` (`vertical` \| `sidebar`) و `rtl` (boolean).
`backLabel (hub-stepper)`	`string \| null`	`null`	يتجاوز تسمية عنصر التحكم "Back". يعود إلى تسمية i18n المدمجة عندما تكون null.
`continueLabel (hub-stepper)`	`string \| null`	`null`	يتجاوز تسمية عنصر التحكم "Continue".
`submitLabel (hub-stepper)`	`string \| null`	`null`	يتجاوز تسمية عنصر التحكم "Submit" للخطوة الأخيرة.
`title (hub-step)`	`string`	—	عنوان الخطوة المعروض في تنقل stepper.
`disabled (hub-step)`	`boolean`	`false`	يعطّل التنقل إلى هذه الخطوة.

المخرجات

تفاعل مع ما يفعله stepper — 3 أحداث لربط منطقك بها.

الاسم	النوع	الوصف
`completed (hub-stepper)`	`EventEmitter<void>`	يُطلَق عندما يرسل المستخدم الخطوة الأخيرة.
`nextStep (hub-stepper)`	`EventEmitter<number>`	يُطلَق عند التقدّم إلى خطوة، مع فهرس الخطوة الجديد.
`previousStep (hub-stepper)`	`EventEmitter<number>`	يُطلَق عند الرجوع إلى خطوة، مع فهرس الخطوة الجديد.

القوالب

لم يتم توثيق أي قوالب بعد.

متغيّرات CSS

نسّق كل بكسل عبر 14 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

سمة Stepper

رموز تنسيق وقت التشغيل لسطح stepper والتنقل وعناصر التحكم. تجاوزها عند `:root` أو حدّد نطاقها لغلاف.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-stepper-primary-color`	`#009ef7`	color	اللون المميّز الأساسي (الحالة النشطة، التقدّم).
`--hub-stepper-background-color`	`#f3f6f9`	color	خلفية زر الرجوع / السطح الثانوي.
`--hub-stepper-text-color`	`#181c32`	color	لون النص الأساسي.
`--hub-stepper-border-color`	`#d8dde6`	color	لون حد سطح stepper.
`--hub-stepper-surface-color`	`#ffffff`	color	خلفية محتوى الخطوة.
`--hub-stepper-nav-link-color`	`#495057`	color	لون تسمية خطوة التنقل.
`--hub-stepper-nav-link-active-bg`	`#0d6efd`	color	خلفية مؤشّر الخطوة النشطة.
`--hub-stepper-nav-link-active-color`	`#ffffff`	color	لون نص مؤشّر الخطوة النشطة.
`--hub-stepper-nav-link-disabled-color`	`#adb5bd`	color	لون تسمية الخطوة المعطّلة.
`--hub-stepper-gap`	`1rem`	length	الفجوة بين مناطق تخطيط stepper.
`--hub-stepper-controls-gap`	`0.5rem`	length	الفجوة بين عناصر تحكم التنقل.
`--hub-stepper-disabled-opacity`	`0.5`	number	الشفافية المطبَّقة على الخطوات المعطّلة.
`--hub-stepper-sidebar-width`	`clamp(160px, 20vw, 240px)`	length	عرض الشريط الجانبي في تخطيط `sidebar`.
`--hub-stepper-animation-duration`	`260ms`	transition	مدة انتقال الخطوة.

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.