{"meta":"

Guide #

\n

When To Use #

\n

The dialog is used to provide the user with an auxiliary window for quickly performing a simple operation, confirming user information, or providing a feedback prompt without leaving the main path.

\n

v2 update #

\n

version 1.25 add api v2 to support open new version Dialog, feature as list:

\n

feature：

\n\n

changes：

\n\n","api":"

API #

\n

Dialog #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault ValueRequiredSupported Version
visibleWhether to showbooleanfalse-
titleTitleReact.ReactNode--
childrenContentReact.ReactNode--
footerFooter content, set to false to hideboolean | React.ReactNode--
footerAlignFooter button alignment'left' | 'center' | 'right''right'-
footerActionsSpecify whether to exist and how to arrange the confirm and cancel buttonsArray<'ok' | 'cancel'>['ok', 'cancel']-
cacheWhether to retain the child node when hidingbooleanfalse1.23
onOkCallback function when the confirm button is clicked(event: React.MouseEvent) => void--
onCancelCallback function when the cancel button is clicked(event: React.MouseEvent) => void--
okPropsProperties for the confirm buttonButtonProps--
cancelPropsProperties for the cancel buttonButtonProps--
closeable[Deprecated] Control the way the dialog is closed'close' | 'mask' | 'esc' | boolean | 'close,mask' | 'close,esc' | 'mask,esc''esc,close'-
closeModeControl the way the dialog is closedCloseMode[] | CloseMode-1.21
onCloseCallback function when the dialog is closed(trigger: string, event: React.MouseEvent | KeyboardEvent) => void--
afterCloseCallback function after the dialog is closed, if there is an animation, it will be triggered after the animation ends() => void--
hasMaskWhether to show the maskbooleantrue-
animationAnimation playback method when showing and hidingRecord<'in' | 'out', string> | false{ in: 'fadeInUp', out: 'fadeOutUp' }-
autoFocusWhether to automatically obtain focus when the dialog is displayedbooleanfalse-
align[v2 Deprecated] Dialog alignment, see Overlay documentationstring | boolean--
isFullScreen[v2 Deprecated] Whether to display all content instead of appearing a scroll bar to ensure that the dialog is displayed completely in the browser viewport, and this attribute only takes effect when the dialog is vertically and horizontally centered, that is, when align is set to 'cc cc'boolean--
shouldUpdatePosition[v2 Deprecated] Whether to update the dialog position immediately when the dialog is reboolean--
minMargin[v2 Deprecated] The minimum spacing between the dialog and the top and bottom of the browser, and the isFullScreen property is set to true and the align property is set to 'cc cc' is not effectivenumber40-
overlayPropsProperties for the overlay componentOverlayProps--
localeCustomized internationalized textPartial<{
ok: string;
cancel: string;
}>		--
heightDialog height stylestring | number--
widthDialog widthstring | number-1.25
popupContainerCustom mount positionstring | HTMLElement | ((target?: HTMLElement) => HTMLElement)--
v2Enable v2 versionfalse | undefinedfalse-
noPaddingRemove body spacingbooleanfalse1.26
closeIconCustomize the close button iconReact.ReactNode-1.25
\n

Dialog V2 #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault ValueRequiredSupported Version
visibleWhether to showbooleanfalse-
titleTitleReact.ReactNode--
childrenContentReact.ReactNode--
footerFooter content, set to false to hideboolean | React.ReactNode--
footerAlignFooter button alignment'left' | 'center' | 'right''right'-
footerActionsSpecify whether to exist and how to arrange the confirm and cancel buttonsArray<'ok' | 'cancel'>['ok', 'cancel']-
cacheWhether to retain the child node when hidingbooleanfalse1.23
onOkCallback function when the confirm button is clicked(event: React.MouseEvent) => void--
onCancelCallback function when the cancel button is clicked(event: React.MouseEvent) => void--
okPropsProperties for the confirm buttonButtonProps--
cancelPropsProperties for the cancel buttonButtonProps--
closeModeControl the way the dialog is closedCloseMode[] | CloseMode-1.21
onCloseCallback function when the dialog is closed(trigger: string, event: React.MouseEvent | KeyboardEvent) => void--
afterCloseCallback function after the dialog is closed, if there is an animation, it will be triggered after the animation ends() => void--
hasMaskWhether to show the maskbooleantrue-
animationAnimation playback method when showing and hidingRecord<'in' | 'out', string> | false{ in: 'fadeInUp', out: 'fadeOutUp' }-
autoFocusWhether to automatically obtain focus when the dialog is displayedbooleanfalse-
isFullScreen[v2 Deprecated] Whether to display all content instead of appearing a scroll bar to ensure that the dialog is displayed completely in the browser viewport, and this attribute only takes effect when the dialog is vertically and horizontally centered, that is, when align is set to 'cc cc'boolean--
minMargin[v2 Deprecated] The minimum spacing between the dialog and the top and bottom of the browser, and the isFullScreen property is set to true and the align property is set to 'cc cc' is not effectivenumber40-
overlayPropsProperties for the overlay componentOverlayProps--
localeCustomized internationalized textPartial<{
ok: string;
cancel: string;
}>		--
heightDialog height stylestring | number--
popupContainerCustom mount positionstring | HTMLElement | ((target?: HTMLElement) => HTMLElement)--
v2Enable v2 versiontruefalse-
closeIconCustomize the close button iconReact.ReactNode-1.25
widthDialog widthstring | number-1.25
noPaddingRemove body spacingbooleanfalse1.26
top[v2] Dialog top margin, default 100, when centered=true, default 40number-1.25
bottom[v2] Dialog bottom marginnumber401.25
overflowScroll[v2] Whether to display a scroll bar when the dialog height exceeds the browser viewport heightboolean-1.25
centered[v2] Dialog center alignmentboolean-1.25
dialogRender[v2] Custom rendering the dialog(modal: React.ReactNode) => React.ReactNode--
wrapperClassName[v2] The className of the outer wrapperstring-1.26
wrapperStyle[v2] The style of the outer wrapperReact.CSSProperties-1.26
\n\n

Dialog.alert(config)/Dialog.confirm(config) #

\n

The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
titletitle of dialogReactNode''
contentcontent of dialogReactNode''
onOkcallback function triggered when the ok button is clickedFunction() => {}
onCancelcallback function triggered when the cancel button is clickedFunction() => {}
messagePropsproperties of MessageObject{}
\n

Dialog.show #

\n

The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
titletitle of dialogReactNode''
contentcontent of dialogReactNode''
onOkcallback function triggered when the ok button is clickedFunction() => {}
onCancelcallback function triggered when the cancel button is clickedFunction() => {}
\n\n

Know Issue #

\n

Stay centered when the dialog height changes #

\n

The Dialog uses JS for positioning by default. When the content is too long, JS automatically adjusts the height of the dialog so that the action button appears in the visible area. However, this may result in the inability to perceive the reuse of JS positioning when the height of the dialog changes. There are two solutions:

\n
    \n
  1. \n

    Set shouldUpdatePosition to true to reposition after content is updated.

    \n
    2. \n
  2. \n

    Use isFullScreen to enable CSS positioning. It can be adaptively centered no matter how the height of the dialog changes, but the action button cannot appear in the visible area when the content is too long.

    \n
    3. \n
\n

ARIA and Keyboard #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyboardDescripiton
escpressing ESC will close dialog
tabfocus on any element that can be focused, the focus remains in the dialog when the dialog is displayed
shift+tabback focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed
\n"}