רכיביםProחדש
חלון מודאלי מכרטיס
כרטיס גדל בלחיצה לחלון גדול: התמונה, הכותרת וכותרת המשנה זורמות למקומן. נסגר בכפתור, בלחיצה על הרקע או ב-Esc.
התאמה
accentColor
glowColor
highlightColor
מבוסס על Linear Modal (MIT רישיון) · תנאי שימוש
מאפיינים
11 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | כרטיס DialogTrigger וחלון DialogContainer עם DialogContent. |
| bounce | number | 0.15 | קפיציות המעבר מהכרטיס לחלון. אפס בלי קפיצה. |
| duration | number | 0.45 | משך המעבר בשניות. |
| transition | Transition | — | מעבר motion מלא משלך. מחליף את bounce ו-duration. |
| DialogContainer.overlayClassName | string | — | מחלקות הרקע שמאחורי החלון. |
| DialogDescription.disableLayoutAnimation | boolean | — | הטקסט פשוט מופיע, בלי לזרום מהכרטיס. |
| DialogImage.src | string | — | תמונה שזורמת מהכרטיס לחלון. |
| accentColor | string | "#ffffff" | הצבע הראשי: זוהר רך מתחת לחלון הפתוח. |
| glowColor | string | "rgba(115,115,115,0.55)" | גוון שעולה מהקצוות של הרקע הכהה מאחורי החלון. |
| highlightColor | string | "rgba(255,255,255,0.12)" | קו בהיר דק לאורך החלק העליון של החלון. |
| className | string | — | מחלקות נוספות. |
תלויות
4 חבילות נדרשות
npm install motion lucide-react clsx tailwind-merge