Dialog Dialog
When to use
Dialog is used as an auxiliary window to provide users with quick execution of simple operations, confirmation of user information, or feedback prompts without leaving the main path.
Component Example
Component Properties
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
afterClose | Event after dialog closes | () => void | - |
afterOpen | Event after dialog opens | () => void | - |
autoFocus | Auto focus, whether to automatically focus to internal form items when Dialog opens | boolean | true |
cancelText | Cancel button text | string | 'Cancel' |
closeable | Dialog closing method, esc: close by pressing ESC key, mask: close by clicking mask | 'esc' | 'mask' | 'esc' |
confirmState | Confirm button confirmation status | 'NORMAL' | 'DISABLED' | 'LOADING' | 'NORMAL' |
confirmStyle | Confirm button type, refer to Button component documentation | 'primary' | 'warning' | 'ghostLight' | 'ghostDark' | 'primary' |
confirmText | Confirm button inner text | string | 'OK' |
footer | Whether the bottom button is displayed | boolean | true |
footerActions | Default button arrangement in dialog footer, cancel represents cancel button, ok represents OK button | 'cancel,ok' | 'cancel,ok' | 'ok' | 'cancel' | 'cancel,ok' |
footerAlign | Dialog OK button and Cancel button alignment | 'left' | 'center' | 'right' | 'right' |
hasMask | Whether the mask is displayed | boolean | true |
height | Dialog height | number | - |
onCancel | Event when clicking Cancel button | () => void | - |
onClose | Event when dialog closes | () => void | - |
onOk | Event when clicking OK button | () => void | - |
onOpen | Event when dialog opens | () => void | - |
title | Dialog title | string | 'Dialog Title' |
visible | Whether the dialog is displayed | boolean | false |
width | Dialog width | number | - |