المؤشّر الدائري للخطوات
يعرض المتدرج الشعاعي مؤشر تقدم دائري للعمليات متعددة الخطوات، متوفر بنمطَي الأساسي والمحايد وأربعة أحجام وتخطيطَي أفقي ورأسي.
Loading demo: radial-stepper-real-world
التثبيت
npx sdaia-ui@latest add radial-stepper
الاستخدام
import { RadialStepper } from "@/components/ui/radial-stepper"<RadialStepper steps={4} current={1} style="primary" layout="horizontal" /><RadialStepper steps={4} current={1} style="primary" layout="horizontal" />الأمثلة
محايد
متدرج شعاعي بالنمط المحايد الافتراضي.
Loading demo: radial-stepper-neutral
تشغيل اللون
متدرج شعاعي على خلفية ملوّنة.
Loading demo: radial-stepper-on-color
عمودي
متدرج شعاعي بخطوات مرتّبة رأسياً.
Loading demo: radial-stepper-vertical
أفقي
متدرج شعاعي بخطوات مرتّبة أفقياً.
Loading demo: radial-stepper-horizontal
مرجع الواجهة البرمجية
RadialStepperProps
خصائص مكوّن RadialStepper.
Prop | Type | Default | Required |
|---|---|---|---|
size | '48px' | '64px' | '80px' | '120px' | '64px' | optional |
layout | 'Horizontal' | 'Vertical' | 'Horizontal' | optional |
variant | 'Primary' | 'Neutral' | 'Primary' | optional |
rtl | boolean | false | optional |
indicator | '1 of 4' | '2 of 4' | '3 of 4' | '4 of 4' | '1 of 4' | optional |
previousLabel | string | 'Previous:' | optional |
showPrevious | boolean | true | optional |
stepName | string | 'Step One' | optional |
showStepName | boolean | true | optional |
description | string | 'this is step description' | optional |
showDescription | boolean | true | optional |
nextLabel | string | 'Next:' | optional |
showNext | boolean | true | optional |