כרטיס מתחלף

במעבר עכבר התמונה עפה מהמרכז לפינה ופאנל פעולות עולה מלמטה. דרך יפה להציג תצוגה מקדימה עם כפתורי שיתוף.

התאמה

accentColor

glowColor

borderColor

מבוסס על Shift Card (MIT רישיון) · תנאי שימוש

8 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
topContent	ReactNode	—	כותרת הכרטיס, תמיד גלויה.
topAnimateContent	ReactNode	—	מה שמופיע בכותרת במעבר עכבר. תנו לתמונה אותו layoutId כמו ב-middleContent.
middleContent	ReactNode	—	תוכן המרכז, גלוי בלי מעבר עכבר.
bottomContent	ReactNode	—	הפאנל שעולה מלמטה.
className	string	—	מחלקות נוספות.
accentColor	string	`"#e5e5e5"`	צבע הדגשה לכפתורים ולאייקונים בתוך הכרטיס. זמין לילדים כ-‎--sc-accent.
glowColor	string	`"rgba(255,255,255,0.08)"`	זוהר רך בפינה העליונה של הכרטיס.
borderColor	string	`"rgba(255,255,255,0.1)"`	מסגרת דקה סביב הכרטיס.

3 חבילות נדרשות

npm install motion clsx tailwind-merge