allowPinchZoom
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
boolean
Default
false.
Leave Yamada UI a star
StarDrawer
is a component for a panel that appears from the edge of the screen.
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
boolean
Default
false.
Description
The HTML element to render.
Type
keyof ReactDOM
Description
Props for the blank area when closeOnDrag
is true
.
Type
CSSUIObject
Description
If true
, scrolling will be disabled on the body
when the modal opens.
Type
boolean
Default
true
Description
If true
, then the drawer will close on drag.
Type
boolean
Default
false
Description
If true
, the modal will close when the Esc
key is pressed.
Type
boolean
Default
true
Description
If true
, the modal will close when the overlay is clicked.
Type
boolean
Default
true
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"
Description
Props for modal container element.
Type
HTMLUIProps
Description
Applies constraints on the permitted draggable area.
Type
number
Default
0
Description
The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
Type
number
Default
0.1
Description
Offset from being dragged to closing.
Type
number
Default
80
Description
Velocity of the drag that triggers close.
Type
number
Default
100
Description
The animation duration.
Type
number | MotionLifecycleProps<number>
Description
ref
of the element to return focus to when FocusLock
unmounts.
Type
RefObject<FocusableElement>
Description
If true
and drawer's placement is top
or bottom
, the drawer will occupy the viewport height (100dvh).
Type
boolean
Description
ref
of the element to receive focus initially.
Type
RefObject<FocusableElement>
Description
If true
and drawer's placement is top
or bottom
, the drawer will occupy the viewport height (100dvh).
Deprecated
Use fullHeight
instead.
Type
boolean
Description
If true
, the open will be opened.
Deprecated
Use open
instead.
Type
boolean
Description
Enables aggressive focus capturing within iframes.
- If true
: keep focus in the lock, no matter where lock is active.
- If false
: allows focus to move outside of iframe.
Type
boolean
Default
false
Description
Callback invoked to close the modal.
Type
() => void
Description
Callback function to run side effects after the modal has closed.
Type
() => void
Description
Callback fired when the escape key is pressed and focus is within modal.
Type
() => void
Description
Callback fired when the overlay is clicked.
Type
() => void
Description
If true
, the open will be opened.
Type
boolean
Description
The placement of the drawer.
Type
UIValue<"bottom" | "left" | "right" | "top">
Default
'right'
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">
Description
If true
, focus will be restored to the element that triggered the FocusLock
once it unmounts.
Type
boolean
Default
false
Description
The size of the Drawer.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "full"
Default
"md"
Description
The variant of the Drawer.
Type
string
Description
If true
, display the modal close button.
Type
boolean
Default
true
Description
If true
, display the drag bar when closeOnDrag
is true
.
Type
boolean
Default
true
Description
If true
, display the modal overlay.
Type
boolean
Default
true
Description
The HTML element to render.
Type
keyof ReactDOM
Description
If true
, disable ripple effects when pressing a element.
Type
boolean
Default
false
Description
If true
, the button is disabled.
Deprecated
Use disabled
instead.
Type
boolean
Default
false
Description
If true, the button is full rounded.
Type
boolean
Default
false
Edit this page on GitHub