isOpen
必須説明
If true, the open will be opened.
タイプ
booleanModal
Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。
Props
ModalProps
about
タイプ
stringaccessKey
タイプ
stringallowPinchZoom
説明
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
タイプ
booleanデフォルト
false.animation
説明
The animation of the tooltip.
タイプ
"none" | "bottom" | "left" | "right" | "top" | "scale"デフォルト
'scale'aria-activedescendant
タイプ
stringaria-atomic
タイプ
Booleanisharia-autocomplete
タイプ
"list" | "none" | "inline" | "both"aria-braillelabel
タイプ
stringaria-brailleroledescription
タイプ
stringaria-busy
タイプ
Booleanisharia-checked
タイプ
boolean | "true" | "false" | "mixed"aria-colcount
タイプ
numberaria-colindex
タイプ
numberaria-colindextext
タイプ
stringaria-colspan
タイプ
numberaria-controls
タイプ
stringaria-current
タイプ
type ONLY_FOR_FORMAT =
| boolean
| "time"
| "true"
| "false"
| "step"
| "page"
| "location"
| "date"aria-describedby
タイプ
stringaria-description
タイプ
stringaria-details
タイプ
stringaria-disabled
タイプ
Booleanisharia-dropeffect
タイプ
"link" | "none" | "copy" | "execute" | "move" | "popup"aria-errormessage
タイプ
stringaria-expanded
タイプ
Booleanisharia-flowto
タイプ
stringaria-grabbed
タイプ
Booleanisharia-haspopup
タイプ
type ONLY_FOR_FORMAT =
| boolean
| "dialog"
| "menu"
| "true"
| "false"
| "grid"
| "listbox"
| "tree"aria-invalid
タイプ
boolean | "true" | "false" | "grammar" | "spelling"aria-keyshortcuts
タイプ
stringaria-label
タイプ
stringaria-labelledby
タイプ
stringaria-level
タイプ
numberaria-live
タイプ
"off" | "assertive" | "polite"aria-modal
タイプ
Booleanisharia-multiline
タイプ
Booleanisharia-multiselectable
タイプ
Booleanisharia-orientation
タイプ
"horizontal" | "vertical"aria-owns
タイプ
stringaria-placeholder
タイプ
stringaria-posinset
タイプ
numberaria-pressed
タイプ
boolean | "true" | "false" | "mixed"aria-readonly
タイプ
Booleanisharia-relevant
タイプ
type ONLY_FOR_FORMAT =
| "text"
| "all"
| "additions"
| "additions removals"
| "additions text"
| "removals"
| "removals additions"
| "removals text"
| "text additions"
| "text removals"aria-required
タイプ
Booleanisharia-roledescription
タイプ
stringaria-rowcount
タイプ
numberaria-rowindex
タイプ
numberaria-rowindextext
タイプ
stringaria-rowspan
タイプ
numberaria-selected
タイプ
Booleanisharia-setsize
タイプ
numberaria-sort
タイプ
"none" | "ascending" | "descending" | "other"aria-valuemax
タイプ
numberaria-valuemin
タイプ
numberaria-valuenow
タイプ
numberaria-valuetext
タイプ
stringas
タイプ
"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 149 more ... | "view"autoCapitalize
タイプ
stringautoCorrect
タイプ
stringautoFocus
説明
If true, the first focusable element within the children will auto-focused once FocusLock mounts.
タイプ
booleanデフォルト
falseautoSave
タイプ
stringblockScrollOnMount
説明
If true, scrolling will be disabled on the body when the modal opens.
タイプ
booleanデフォルト
trueclassName
タイプ
stringcloseOnEsc
説明
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.
タイプ
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"content
タイプ
stringcontentEditable
タイプ
"inherit" | Booleanish | "plaintext-only"contextMenu
タイプ
stringdangerouslySetInnerHTML
タイプ
{ __html: string | TrustedHTML }datatype
タイプ
stringdefaultChecked
タイプ
booleandefaultValue
タイプ
string | number | readonly string[]dir
タイプ
stringdraggable
タイプ
Booleanishduration
説明
The animation duration.
タイプ
number | Partial<Record<"exit" | "enter", number>>finalFocusRef
説明
ref of the element to return focus to when FocusLock unmounts.
タイプ
RefObject<FocusableElement>id
タイプ
stringinitialFocusRef
説明
ref of the element to receive focus initially.
タイプ
RefObject<FocusableElement>inlist
タイプ
anyinputMode
タイプ
type ONLY_FOR_FORMAT =
| "search"
| "text"
| "none"
| "tel"
| "url"
| "email"
| "numeric"
| "decimal"is
タイプ
stringitemID
タイプ
stringitemProp
タイプ
stringitemRef
タイプ
stringitemScope
タイプ
booleanitemType
タイプ
stringlang
タイプ
stringlockFocusAcrossFrames
説明
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デフォルト
falsenonce
タイプ
stringonAbort
タイプ
ReactEventHandler<HTMLElement>onAbortCapture
タイプ
ReactEventHandler<HTMLElement>onAnimationEnd
タイプ
AnimationEventHandler<HTMLElement>onAnimationEndCapture
タイプ
AnimationEventHandler<HTMLElement>onAnimationIteration
タイプ
AnimationEventHandler<HTMLElement>onAnimationIterationCapture
タイプ
AnimationEventHandler<HTMLElement>onAnimationStartCapture
タイプ
AnimationEventHandler<HTMLElement>onAuxClick
タイプ
MouseEventHandler<HTMLElement>onAuxClickCapture
タイプ
MouseEventHandler<HTMLElement>onBeforeInput
タイプ
FormEventHandler<HTMLElement>onBeforeInputCapture
タイプ
FormEventHandler<HTMLElement>onBlur
タイプ
FocusEventHandler<HTMLElement>onBlurCapture
タイプ
FocusEventHandler<HTMLElement>onCanPlay
タイプ
ReactEventHandler<HTMLElement>onCanPlayCapture
タイプ
ReactEventHandler<HTMLElement>onCanPlayThrough
タイプ
ReactEventHandler<HTMLElement>onCanPlayThroughCapture
タイプ
ReactEventHandler<HTMLElement>onChange
タイプ
FormEventHandler<HTMLElement>onChangeCapture
タイプ
FormEventHandler<HTMLElement>onClick
タイプ
MouseEventHandler<HTMLElement>onClickCapture
タイプ
MouseEventHandler<HTMLElement>onClose
説明
Callback invoked to close the modal.
タイプ
() => voidonCloseComplete
説明
Callback function to run side effects after the modal has closed.
タイプ
() => voidonCompositionEnd
タイプ
CompositionEventHandler<HTMLElement>onCompositionEndCapture
タイプ
CompositionEventHandler<HTMLElement>onCompositionStart
タイプ
CompositionEventHandler<HTMLElement>onCompositionStartCapture
タイプ
CompositionEventHandler<HTMLElement>onCompositionUpdate
タイプ
CompositionEventHandler<HTMLElement>onCompositionUpdateCapture
タイプ
CompositionEventHandler<HTMLElement>onContextMenu
タイプ
MouseEventHandler<HTMLElement>onContextMenuCapture
タイプ
MouseEventHandler<HTMLElement>onCopy
タイプ
ClipboardEventHandler<HTMLElement>onCopyCapture
タイプ
ClipboardEventHandler<HTMLElement>onCut
タイプ
ClipboardEventHandler<HTMLElement>onCutCapture
タイプ
ClipboardEventHandler<HTMLElement>onDoubleClick
タイプ
MouseEventHandler<HTMLElement>onDoubleClickCapture
タイプ
MouseEventHandler<HTMLElement>onDragCapture
タイプ
DragEventHandler<HTMLElement>onDragEndCapture
タイプ
DragEventHandler<HTMLElement>onDragEnter
タイプ
DragEventHandler<HTMLElement>onDragEnterCapture
タイプ
DragEventHandler<HTMLElement>onDragExit
タイプ
DragEventHandler<HTMLElement>onDragExitCapture
タイプ
DragEventHandler<HTMLElement>onDragLeave
タイプ
DragEventHandler<HTMLElement>onDragLeaveCapture
タイプ
DragEventHandler<HTMLElement>onDragOver
タイプ
DragEventHandler<HTMLElement>onDragOverCapture
タイプ
DragEventHandler<HTMLElement>onDragStartCapture
タイプ
DragEventHandler<HTMLElement>onDrop
タイプ
DragEventHandler<HTMLElement>onDropCapture
タイプ
DragEventHandler<HTMLElement>onDurationChange
タイプ
ReactEventHandler<HTMLElement>onDurationChangeCapture
タイプ
ReactEventHandler<HTMLElement>onEmptied
タイプ
ReactEventHandler<HTMLElement>onEmptiedCapture
タイプ
ReactEventHandler<HTMLElement>onEncrypted
タイプ
ReactEventHandler<HTMLElement>onEncryptedCapture
タイプ
ReactEventHandler<HTMLElement>onEnded
タイプ
ReactEventHandler<HTMLElement>onEndedCapture
タイプ
ReactEventHandler<HTMLElement>onError
タイプ
ReactEventHandler<HTMLElement>onErrorCapture
タイプ
ReactEventHandler<HTMLElement>onEsc
説明
Callback fired when the escape key is pressed and focus is within modal.
タイプ
() => voidonFocus
タイプ
FocusEventHandler<HTMLElement>onFocusCapture
タイプ
FocusEventHandler<HTMLElement>onGotPointerCapture
タイプ
PointerEventHandler<HTMLElement>onGotPointerCaptureCapture
タイプ
PointerEventHandler<HTMLElement>onInput
タイプ
FormEventHandler<HTMLElement>onInputCapture
タイプ
FormEventHandler<HTMLElement>onInvalid
タイプ
FormEventHandler<HTMLElement>onInvalidCapture
タイプ
FormEventHandler<HTMLElement>onKeyDown
タイプ
KeyboardEventHandler<HTMLElement>onKeyDownCapture
タイプ
KeyboardEventHandler<HTMLElement>onKeyPress
タイプ
KeyboardEventHandler<HTMLElement>onKeyPressCapture
タイプ
KeyboardEventHandler<HTMLElement>onKeyUp
タイプ
KeyboardEventHandler<HTMLElement>onKeyUpCapture
タイプ
KeyboardEventHandler<HTMLElement>onLoad
タイプ
ReactEventHandler<HTMLElement>onLoadCapture
タイプ
ReactEventHandler<HTMLElement>onLoadedData
タイプ
ReactEventHandler<HTMLElement>onLoadedDataCapture
タイプ
ReactEventHandler<HTMLElement>onLoadedMetadata
タイプ
ReactEventHandler<HTMLElement>onLoadedMetadataCapture
タイプ
ReactEventHandler<HTMLElement>onLoadStart
タイプ
ReactEventHandler<HTMLElement>onLoadStartCapture
タイプ
ReactEventHandler<HTMLElement>onLostPointerCapture
タイプ
PointerEventHandler<HTMLElement>onLostPointerCaptureCapture
タイプ
PointerEventHandler<HTMLElement>onMouseDown
タイプ
MouseEventHandler<HTMLElement>onMouseDownCapture
タイプ
MouseEventHandler<HTMLElement>onMouseEnter
タイプ
MouseEventHandler<HTMLElement>onMouseLeave
タイプ
MouseEventHandler<HTMLElement>onMouseMove
タイプ
MouseEventHandler<HTMLElement>onMouseMoveCapture
タイプ
MouseEventHandler<HTMLElement>onMouseOut
タイプ
MouseEventHandler<HTMLElement>onMouseOutCapture
タイプ
MouseEventHandler<HTMLElement>onMouseOver
タイプ
MouseEventHandler<HTMLElement>onMouseOverCapture
タイプ
MouseEventHandler<HTMLElement>onMouseUp
タイプ
MouseEventHandler<HTMLElement>onMouseUpCapture
タイプ
MouseEventHandler<HTMLElement>onOverlayClick
説明
Callback fired when the overlay is clicked.
タイプ
() => voidonPaste
タイプ
ClipboardEventHandler<HTMLElement>onPasteCapture
タイプ
ClipboardEventHandler<HTMLElement>onPause
タイプ
ReactEventHandler<HTMLElement>onPauseCapture
タイプ
ReactEventHandler<HTMLElement>onPlay
タイプ
ReactEventHandler<HTMLElement>onPlayCapture
タイプ
ReactEventHandler<HTMLElement>onPlaying
タイプ
ReactEventHandler<HTMLElement>onPlayingCapture
タイプ
ReactEventHandler<HTMLElement>onPointerCancel
タイプ
PointerEventHandler<HTMLElement>onPointerCancelCapture
タイプ
PointerEventHandler<HTMLElement>onPointerDown
タイプ
PointerEventHandler<HTMLElement>onPointerDownCapture
タイプ
PointerEventHandler<HTMLElement>onPointerEnter
タイプ
PointerEventHandler<HTMLElement>onPointerLeave
タイプ
PointerEventHandler<HTMLElement>onPointerMove
タイプ
PointerEventHandler<HTMLElement>onPointerMoveCapture
タイプ
PointerEventHandler<HTMLElement>onPointerOut
タイプ
PointerEventHandler<HTMLElement>onPointerOutCapture
タイプ
PointerEventHandler<HTMLElement>onPointerOver
タイプ
PointerEventHandler<HTMLElement>onPointerOverCapture
タイプ
PointerEventHandler<HTMLElement>onPointerUp
タイプ
PointerEventHandler<HTMLElement>onPointerUpCapture
タイプ
PointerEventHandler<HTMLElement>onProgress
タイプ
ReactEventHandler<HTMLElement>onProgressCapture
タイプ
ReactEventHandler<HTMLElement>onRateChange
タイプ
ReactEventHandler<HTMLElement>onRateChangeCapture
タイプ
ReactEventHandler<HTMLElement>onReset
タイプ
FormEventHandler<HTMLElement>onResetCapture
タイプ
FormEventHandler<HTMLElement>onResize
タイプ
ReactEventHandler<HTMLElement>onResizeCapture
タイプ
ReactEventHandler<HTMLElement>onScroll
タイプ
UIEventHandler<HTMLElement>onScrollCapture
タイプ
UIEventHandler<HTMLElement>onSeeked
タイプ
ReactEventHandler<HTMLElement>onSeekedCapture
タイプ
ReactEventHandler<HTMLElement>onSeeking
タイプ
ReactEventHandler<HTMLElement>onSeekingCapture
タイプ
ReactEventHandler<HTMLElement>onSelect
タイプ
ReactEventHandler<HTMLElement>onSelectCapture
タイプ
ReactEventHandler<HTMLElement>onStalled
タイプ
ReactEventHandler<HTMLElement>onStalledCapture
タイプ
ReactEventHandler<HTMLElement>onSubmit
タイプ
FormEventHandler<HTMLElement>onSubmitCapture
タイプ
FormEventHandler<HTMLElement>onSuspend
タイプ
ReactEventHandler<HTMLElement>onSuspendCapture
タイプ
ReactEventHandler<HTMLElement>onTimeUpdate
タイプ
ReactEventHandler<HTMLElement>onTimeUpdateCapture
タイプ
ReactEventHandler<HTMLElement>onTouchCancel
タイプ
TouchEventHandler<HTMLElement>onTouchCancelCapture
タイプ
TouchEventHandler<HTMLElement>onTouchEnd
タイプ
TouchEventHandler<HTMLElement>onTouchEndCapture
タイプ
TouchEventHandler<HTMLElement>onTouchMove
タイプ
TouchEventHandler<HTMLElement>onTouchMoveCapture
タイプ
TouchEventHandler<HTMLElement>onTouchStart
タイプ
TouchEventHandler<HTMLElement>onTouchStartCapture
タイプ
TouchEventHandler<HTMLElement>onTransitionEnd
タイプ
TransitionEventHandler<HTMLElement>onTransitionEndCapture
タイプ
TransitionEventHandler<HTMLElement>onVolumeChange
タイプ
ReactEventHandler<HTMLElement>onVolumeChangeCapture
タイプ
ReactEventHandler<HTMLElement>onWaiting
タイプ
ReactEventHandler<HTMLElement>onWaitingCapture
タイプ
ReactEventHandler<HTMLElement>onWheel
タイプ
WheelEventHandler<HTMLElement>onWheelCapture
タイプ
WheelEventHandler<HTMLElement>outside
説明
The CSS padding property.
タイプ
UIValue<number | "initial" | "inherit" | (string & {}) | "px" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "-1" | "2" | "-2" | ... 72 more ... | "-3.5">placement
説明
The placement of the modal.
タイプ
UIValue<| "center"
| "bottom"
| "left"
| "right"
| "top"
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right">デフォルト
'center'portalProps
説明
Props to be forwarded to the portal component.
タイプ
Omit<PortalProps, "children">prefix
タイプ
stringproperty
タイプ
stringradioGroup
タイプ
stringrel
タイプ
stringresource
タイプ
stringrestoreFocus
説明
If true, focus will be restored to the element that triggered the FocusLock once it unmounts.
タイプ
booleanデフォルト
falseresults
タイプ
numberrev
タイプ
stringrole
タイプ
AriaRolescrollBehavior
説明
Where scroll behavior should originate.
- inside: scroll only occurs within the ModalBody.
- outside: the entire ModalContent will scroll within the viewport.
タイプ
"outside" | "inside"デフォルト
'inside'security
タイプ
stringsize
説明
The size of the Modal.
タイプ
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"デフォルト
mdslot
タイプ
stringspellCheck
タイプ
BooleanishsuppressContentEditableWarning
タイプ
booleansuppressHydrationWarning
タイプ
booleantabIndex
タイプ
numbertitle
タイプ
stringtranslate
タイプ
"yes" | "no"typeof
タイプ
stringunselectable
タイプ
"on" | "off"variant
説明
The variant of the Modal.
タイプ
stringvocab
タイプ
stringwithCloseButton
説明
If true, display the modal close button.
タイプ
booleanデフォルト
truewithOverlay
説明
If true, display the modal overlay.
タイプ
booleanデフォルト
trueModalOverlayProps
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デフォルト
falseModalHeaderProps
ModalBodyProps
ModalFooterProps
GitHubでこのページを編集する