isOpen
必須説明
If true, the open will be opened.
タイプ
booleanModal
Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。
Props
ModalProps
allowPinchZoom
説明
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
タイプ
booleanデフォルト
false.animation
説明
The animation of the tooltip.
タイプ
"bottom" | "left" | "right" | "scale" | "top" | "none"デフォルト
'scale'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"blockScrollOnMount
説明
If true, scrolling will be disabled on the body when the modal opens.
タイプ
booleanデフォルト
truecloseOnEsc
説明
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.
タイプ
HTMLUIPropsduration
説明
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>lockFocusAcrossFrames
説明
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.
タイプ
() => voidoutside
説明
The CSS padding property.
タイプ
UIValue<number | "px" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-0.5" | "-1" | ... 99 more ... | "xs">placement
説明
The placement of the modal.
タイプ
UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">デフォルト
'center'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デフォルト
falsescrollBehavior
説明
Where scroll behavior should originate.
- inside: scroll only occurs within the ModalBody.
- outside: the entire ModalContent will scroll within the viewport.
タイプ
"outside" | "inside"デフォルト
'inside'size
説明
The size of the Modal.
タイプ
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"デフォルト
"md"variant
説明
The variant of the Modal.
タイプ
stringwithCloseButton
説明
If true, display the modal close button.
タイプ
booleanデフォルト
truewithOverlay
説明
If true, display the modal overlay.
タイプ
booleanデフォルト
trueModalHeaderProps
ModalBodyProps
ModalFooterProps
ModalOverlayProps
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"ModalCloseButtonProps
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でこのページを編集する