Drawer 抽屉
何时使用
抽屉是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
组件示例
组件属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
afterClose | Drawer关闭后事件 | () => void | - |
afterOpen | Drawer打开后事件 | () => void | - |
cancelText | 取消按钮文案 | string | '取消' |
closeable | 关闭对话框方式,esc:点击 ESC 按键关闭、mask:点击遮罩关闭 | 'esc' | 'mask' | 'esc' |
confirmState | 确定按钮的确认状态 | 'NORMAL' | 'DISABLED' | 'LOADING' | 'NORMAL' |
confirmStyle | 确定按钮类型,参考 Button 组件的文档 | 'primary' | 'warning' | 'ghostLight' | 'ghostDark' | 'primary' |
confirmText | 确定按钮内文案 | string | '确定' |
footer | 底部按钮是否显示 | boolean | true |
footerActions | 对话框底部默认按钮排列方式,cancel代表取消按钮,ok代表确定按钮 | 'cancel,ok' | 'cancel,ok' | 'ok' | 'cancel' | 'cancel,ok' |
footerAlign | 对话框确定按钮和取消按钮对齐方式 | 'left' | 'center' | 'right' | 'right' |
hasMask | 遮罩是否显示 | boolean | true |
height | 抽屉框高度 | number | - |
onCancel | 点击取消按钮时事件 | () => void | - |
onClose | Drawer关闭时事件 | () => void | - |
onOk | 点击确定按钮时事件 | () => void | - |
placement | Drawer弹出位置 | 'right' | 'top' | 'bottom' | 'left' | 'right' |
title | 抽屉标题 | string | 'Drawer标题' |
visible | 抽屉是否显示 | boolean | false |
width | 抽屉框宽度 | number | - |
本文档对您是否有帮助?