מגירת תפריט נשלפת

לוח צד נכנס על קפיץ וכפתור התפריט מתמזג בו. אפשר לגרור את הלוח, ללחוץ על הרקע או על כפתור הסגירה כדי לסגור.

התאמה

width280px

dragThreshold0.30

backgroundColor

accentColor

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

15 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
children	ReactNode	—	תוכן הלוח, למשל תפריט.
width	number	`280`	רוחב הלוח בפיקסלים.
direction	'left' \| 'right'	`"left"`	מאיזה צד הלוח נכנס.
buttonOpeningVariants	'merge' \| 'push' \| 'stay'	`"merge"`	איך כפתור התפריט נעלם: מתמזג בלוח, נוסע איתו או דועך במקום.
enableDrag	boolean	`true`	אפשר לגרור את הלוח כדי לסגור אותו.
dragThreshold	number	`0.3`	איזה חלק מהרוחב צריך לגרור כדי שהלוח ייסגר.
backgroundColor	string	`"#111111"`	צבע הלוח.
accentColor	string	`"#ffffff"`	צבע סמל התפריט וקו הקצה של המגירה.
overlayColor	string	`"rgba(0, 0, 0, 0.55)"`	צבע ההחשכה מאחורי הלוח.
contained	boolean	`false`	הלוח והכפתור יושבים בתוך ההורה הממוקם הקרוב ולא מעל כל החלון.
isOpen	boolean	—	מצב מבוקר: האם הלוח פתוח.
onToggle	(isOpen: boolean) => void	—	נקרא בפתיחה ובסגירה.
showToggleButton	boolean	`true`	להציג את כפתור התפריט ואת כפתור הסגירה.
animationConfig	{ type?, damping?, stiffness?, duration? }	—	הגדרות הקפיץ של הכניסה.
className	string	—	מחלקות נוספות.

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

npm install motion lucide-react clsx tailwind-merge