אנימציותחדש
תמונה מתחת לסמן ברשימה
רשימה של כיתובים גדולים. ריחוף על שורה מקפיץ את התמונה שלה מתחת לסמן, והיא גולשת אחרי העכבר.
התאמה
color
lineColor
tagColor
labelColor
מבוסס על Image Reveal (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
10 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| items | { img: string; label: string; tag: string }[] | — | שורות הרשימה: תמונה, כיתוב גדול ותגית בצד. |
| imageWidth | number | 300 | רוחב התמונה הצפה בפיקסלים. |
| imageHeight | number | 220 | גובה התמונה הצפה בפיקסלים. |
| stiffness | number | 150 | קשיחות הקפיץ: גבוה יותר והתמונה משיגה את הסמן מהר יותר. |
| damping | number | 15 | ריסון הקפיץ: נמוך יותר יותר נדנוד. |
| color | string | "#ffffff" | צבע הריבוע הקטן ליד כל תגית. |
| lineColor | string | "rgba(255, 255, 255, 0.1)" | צבע הקווים בין השורות. |
| tagColor | string | "rgba(255, 255, 255, 0.55)" | צבע התגיות מימין. |
| labelColor | string | "#ffffff" | צבע הכיתובים הגדולים. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge