רכיביםחדש
לשוניות עם מחוון מחליק
לשוניות טקסט עם מחוון שגולש אל הנבחרת. שני סגנונות: קו תחתון או כמוסה לבנה מאחורי הטקסט.
התאמה
accentColor
secondaryColor
glowColor
מבוסס על Line Tabs (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
11 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| tabs | string[] | — | שמות הלשוניות. |
| defaultValue | string | — | איזו לשונית נבחרת בהתחלה. כברירת מחדל הראשונה. |
| variant | 'line' | 'pill' | "line" | סגנון המחוון: קו תחתון או כמוסה מלאה. |
| center | boolean | false | למרכז את השורה. |
| duration | number | 0.4 | משך תנועת המחוון בשניות. |
| bounce | number | 0 | קפיציות המחוון. אפס בלי קפיצה. |
| onChange | (tab: string) => void | — | נקרא עם הלשונית שנבחרה. |
| accentColor | string | "#ffffff" | הצבע הראשי: מילוי הגלולה או תחילת הקו. הטקסט על הגלולה נהיה כהה או לבן כדי להישאר קריא. |
| secondaryColor | string | "#a3a3a3" | הצבע השני: שבו מסתיים מעבר הצבע של הקו. |
| glowColor | string | "rgba(255, 255, 255, 0.3)" | זוהר רך מתחת למחוון. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge