isOpen
必須説明
If true, the open will be opened.
タイプ
booleanDrawer
Drawerは、画面の端から表示されるパネルのコンポーネントです。
Props
DrawerProps
allowPinchZoom
説明
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
タイプ
booleanデフォルト
false.as
説明
The HTML element to render.
タイプ
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "section" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 150 more ... | "textPath"blankForDragProps
説明
Props for the blank area when closeOnDrag is true.
タイプ
CSSUIObjectblockScrollOnMount
説明
If true, scrolling will be disabled on the body when the modal opens.
タイプ
booleanデフォルト
truecloseOnDrag
説明
If true, then the drawer will close on drag.
タイプ
booleanデフォルト
falsecloseOnEsc
説明
If true, the modal will close when the Esc key is pressed.
タイプ
booleanデフォルト
truecloseOnOverlay
説明
If true, the modal will close when the overlay is clicked.
タイプ
booleanデフォルト
truecolorScheme
説明
The visual color appearance of the component.
タイプ
"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"containerProps
説明
Props for modal container element.
タイプ
HTMLUIPropsdragConstraints
説明
Applies constraints on the permitted draggable area.
タイプ
numberデフォルト
0dragElastic
説明
The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
タイプ
numberデフォルト
0.1dragOffset
説明
Offset from being dragged to closing.
タイプ
numberデフォルト
80dragVelocity
説明
Velocity of the drag that triggers close.
タイプ
numberデフォルト
100duration
説明
The animation duration.
タイプ
number | MotionLifecycleProps<number>finalFocusRef
説明
ref of the element to return focus to when FocusLock unmounts.
タイプ
RefObject<FocusableElement>initialFocusRef
説明
ref of the element to receive focus initially.
タイプ
RefObject<FocusableElement>isFullHeight
説明
If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100dvh).
タイプ
booleanlockFocusAcrossFrames
説明
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.
タイプ
booleanデフォルト
falseonClose
説明
Callback invoked to close the modal.
タイプ
() => voidonCloseComplete
説明
Callback function to run side effects after the modal has closed.
タイプ
() => voidonEsc
説明
Callback fired when the escape key is pressed and focus is within modal.
タイプ
() => voidonOverlayClick
説明
Callback fired when the overlay is clicked.
タイプ
() => voidplacement
説明
The placement of the drawer.
タイプ
UIValue<"bottom" | "left" | "right" | "top">デフォルト
'right'portalProps
説明
Props to be forwarded to the portal component.
タイプ
Omit<PortalProps, "children">restoreFocus
説明
If true, focus will be restored to the element that triggered the FocusLock once it unmounts.
タイプ
booleanデフォルト
falsesize
説明
The size of the Drawer.
タイプ
"xs" | "sm" | "md" | "lg" | "xl" | "full"デフォルト
"md"variant
説明
The variant of the Drawer.
タイプ
stringwithCloseButton
説明
If true, display the modal close button.
タイプ
booleanデフォルト
truewithDragBar
説明
If true, display the drag bar when closeOnDrag is true.
タイプ
booleanデフォルト
truewithOverlay
説明
If true, display the modal overlay.
タイプ
booleanデフォルト
trueDrawerHeaderProps
DrawerBodyProps
DrawerFooterProps
DrawerOverlayProps
as
説明
The HTML element to render.
タイプ
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "section" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 150 more ... | "textPath"DrawerCloseButtonProps
disableRipple
説明
If true, disable ripple effects when pressing a element.
タイプ
booleanデフォルト
falseisDisabled
説明
If true, the button is disabled.
タイプ
booleanデフォルト
falseisRounded
説明
If true, the button is full rounded.
タイプ
booleanデフォルト
falseGitHubでこのページを編集する