כרטיסיםProחדש
כרטיסים בערימה בגלילה
בזמן הגלילה הכרטיסים נערמים זה על זה בהטיה קלה. בנוי על CSS sticky בלבד, בלי JavaScript.
התאמה
cardColor
secondaryColor
highlightColor
מבוסס על CSS Card Stacking (MIT רישיון) · תנאי שימוש
מאפיינים
9 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| cards | { title: string; description: string; href?: string; linkLabel?: string }[] | — | כרטיסי הערימה: כותרת, טקסט וקישור. |
| aside | ReactNode | — | בלוק נעוץ מימין, למשל כותרת מקטע. מוסתר בטלפון. |
| height | string | "100vh" | גובה צעד גלילה אחד, כל אורך CSS. |
| tilt | number | 6 | הטיית הכרטיסים במעלות. הם מתחלפים: ימינה, ישר, שמאלה. |
| cardWidth | number | 420 | רוחב הכרטיס בפיקסלים. |
| className | string | — | מחלקות נוספות. |
| cardColor | string | "#a3a3a3" | צבע הכרטיס השני בכל רביעייה. הטקסט הופך לכהה או לבן לבד. |
| secondaryColor | string | "#262626" | צבע הכרטיס השלישי בכל רביעייה. |
| highlightColor | string | "#f5f5f5" | הצבע הבהיר של הכרטיס הראשון בכל רביעייה. |
תלויות
2 חבילות נדרשות
npm install clsx tailwind-merge