רכיביםחדש
לשוניות אייקונים
שורת אייקונים. הלשונית שנבחרה מתרחבת ומחליקה את שמה החוצה, השאר נשארות קומפקטיות.
התאמה
accentColor
secondaryColor
glowColor
מבוסס על Icon Tabs (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
9 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| tabs | { title: string; icon: ReactNode }[] | — | לשוניות: שם ואייקון. |
| defaultIndex | number | 0 | איזו לשונית נבחרת בהתחלה, הספירה מאפס. |
| center | boolean | false | למרכז את השורה. |
| duration | number | 0.35 | משך ההתרחבות בשניות. |
| onChange | (index: number) => void | — | נקרא עם מספר הלשונית שנבחרה. |
| accentColor | string | "#ffffff" | הצבע הראשי: הסמל וההדגשה של הלשונית הנבחרת. |
| secondaryColor | string | "#a3a3a3" | הצבע השני: אליו דועכת ההדגשה של הלשונית הנבחרת. |
| glowColor | string | "rgba(255, 255, 255, 0.18)" | זוהר רך סביב הלשונית הנבחרת. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge