רכיביםחדש
טופס בשלבים
שלבים עם עיגולים שהופכים לסימני וי ופס התקדמות. תוכן השלב מחליק לכיוון התנועה: קדימה או אחורה.
התאמה
accentColor
secondaryColor
glowColor
מבוסס על Checked Stepper (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
11 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| steps | { label: string; content?: ReactNode }[] | — | שלבים: כיתוב ותוכן. |
| initialStep | number | 0 | מאיזה שלב להתחיל, הספירה מאפס. |
| showProgress | boolean | true | פס שמתמלא עד השלב הנוכחי. |
| activeScale | number | 1.2 | בכמה מוגדל העיגול של השלב הנוכחי. |
| prevLabel | string | "Previous" | טקסט כפתור החזרה. |
| nextLabel | string | "Next" | טקסט כפתור ההמשך. |
| onStepChange | (step: number) => void | — | נקרא עם מספר השלב החדש. |
| accentColor | string | "#ffffff" | הצבע הראשי: שלבים שהושלמו, תחילת הפס וכפתור הבא. |
| secondaryColor | string | "#a3a3a3" | הצבע השני: שבו מסתיים מעבר הצבע של פס ההתקדמות. |
| glowColor | string | "rgba(255, 255, 255, 0.35)" | זוהר רך סביב השלב הנוכחי. |
| className | string | — | מחלקות נוספות. |
תלויות
4 חבילות נדרשות
npm install motion lucide-react clsx tailwind-merge