אנימציותחדש
גלריית לבנים
תמונות בגבהים שונים בעמודות בלי רווחים. כל אחת מתחדדת מתוך טשטוש כשהיא מגיעה למסך וגדלה לתצוגה גדולה בלחיצה.
התאמה
hoverColor
borderColor
captionColor
מבוסס על Masonry Grid (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
9 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| items | { id: string | number; src: string; title: string }[] | — | תמונות הגלריה עם כיתובים. |
| columns | number | 3 | מספר עמודות מ-640 פיקסלים. בטלפון תמיד שתיים. |
| gap | number | 16 | רווח בין התמונות בפיקסלים. |
| stagger | number | 0.06 | השהיה בין הופעת תמונות שכנות בשניות. |
| expandable | boolean | true | לחיצה מגדילה את התמונה לתצוגה גדולה. |
| hoverColor | string | "#ffffff" | מסגרת האריח שמתחת לסמן. |
| borderColor | string | "rgba(255, 255, 255, 0.1)" | מסגרת דקה של האריחים ושל התצוגה הגדולה. |
| captionColor | string | "#ffffff" | צבע כותרות התמונות. הן יושבות על רקע כהה. |
| className | string | — | מחלקות נוספות. |
תלויות
4 חבילות נדרשות
npm install motion lucide-react clsx tailwind-merge