Dialog

Dialogは、ユーザーに実行の確認または中断に使用されるコンポーネントです。

ソース @yamada-ui/modal

Props

DialogProps

説明

If true, the open will be opened.

タイプ

boolean

説明

Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.

タイプ

boolean

デフォルト

false.

説明

The animation of the tooltip.

タイプ

デフォルト

'scale'

説明

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"

説明

If true, scrolling will be disabled on the body when the modal opens.

タイプ

boolean

デフォルト

true

説明

The dialog cancel to use.

タイプ

type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonProps

説明

If true, the modal will close when the Esc key is pressed.

タイプ

boolean

デフォルト

true

説明

If true, the modal will close when the overlay is clicked.

タイプ

boolean

デフォルト

true

説明

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"

説明

Props for modal container element.

タイプ

HTMLUIProps

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

ref of the element to return focus to when FocusLock unmounts.

タイプ

RefObject<FocusableElement>

説明

ref of the element to receive focus initially.

タイプ

RefObject<FocusableElement>

説明

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

デフォルト

false

説明

The callback invoked when cancel button clicked.

タイプ

(onClose: (() => void) | undefined) => void

説明

Callback invoked to close the modal.

タイプ

() => void

説明

Callback function to run side effects after the modal has closed.

タイプ

() => void

説明

Callback fired when the escape key is pressed and focus is within modal.

タイプ

() => void

説明

The callback invoked when other button clicked.

タイプ

(onClose: (() => void) | undefined) => void

説明

Callback fired when the overlay is clicked.

タイプ

() => void

説明

The callback invoked when success button clicked.

タイプ

(onClose: (() => void) | undefined) => void

説明

The dialog other to use.

タイプ

type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonProps

説明

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">

説明

The placement of the modal.

タイプ

UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">

デフォルト

'center'

説明

Props to be forwarded to the portal component.

タイプ

Omit<PortalProps, "children">

説明

If true, focus will be restored to the element that triggered the FocusLock once it unmounts.

タイプ

boolean

デフォルト

false

説明

Where scroll behavior should originate. - inside: scroll only occurs within the ModalBody. - outside: the entire ModalContent will scroll within the viewport.

タイプ

"outside" | "inside"

デフォルト

'inside'

説明

The size of the Dialog.

タイプ

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"

デフォルト

"md"

説明

The dialog success to use.

タイプ

type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonProps

説明

The variant of the Dialog.

タイプ

string

説明

If true, display the modal close button.

タイプ

boolean

デフォルト

true

説明

If true, display the modal overlay.

タイプ

boolean

デフォルト

true

DialogHeaderProps

DialogBodyProps

DialogFooterProps

DialogOverlayProps

説明

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"

DialogCloseButtonProps

説明

If true, disable ripple effects when pressing a element.

タイプ

boolean

デフォルト

false

説明

If true, the button is disabled.

タイプ

boolean

デフォルト

false

説明

If true, the button is full rounded.

タイプ

boolean

デフォルト

false

GitHubでこのページを編集する

前Modal 次Drawer