Drawer Drawer
When to use
Drawer 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 Drawer closes | () => void | - |
afterOpen | Event after Drawer opens | () => void | - |
cancelText | Cancel button text | string | 'Cancel' |
closeable | Dialog closing method, esc: close by clicking 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 | Drawer frame height | number | - |
onCancel | Event when clicking Cancel button | () => void | - |
onClose | Event when Drawer closes | () => void | - |
onOk | Event when clicking OK button | () => void | - |
placement | Drawer popup position | 'right' | 'top' | 'bottom' | 'left' | 'right' |
title | Drawer title | string | 'Drawer Title' |
visible | Whether the drawer is displayed | boolean | false |
width | Drawer frame width | number | - |