Modal / 对话框

弹出显示需要额外注意或重要的内容。如果你仅需要提示文本信息，请考虑 Toast 组件。

对话框组件包含额外的 Hooks，详情请参阅 useModal 小节。

基础的

使用 visible 属性控制何时显示对话框。

无按钮

隐藏指定的按钮。

禁用按钮

禁用指定的按钮。

定制化

自定义 width 或是 className。

加载中

APIs / 接口文档

Modal.Props

属性描述类型推荐值默认
visible打开或关闭对话框boolean-false
onClose关闭的事件() => void--
onContentClick对话框内部点击事件(e: MouseEvent) => void--
wrapClassName对话框的自定义样式类名string--
keyboard按下 Esc 键关闭对话框boolean-true
disableBackdropClick点击背景层时是否关闭对话框boolean-false
...原生属性HTMLAttributes'autoFocus', 'name', 'className', ...-

Modal.Title.Props

属性描述类型推荐值默认
...原生属性HTMLAttributes'id', 'className', ...-

Modal.Subtitle.Props

属性描述类型推荐值默认
...原生属性HTMLAttributes'id', 'className', ...-

Modal.Content.Props

属性描述类型推荐值默认
...原生属性HTMLAttributes'id', 'className', ...-

Modal.Action.Props

属性描述类型推荐值默认
passive以消极的状态显示按钮boolean-false
disabled禁用按钮boolean-false
onClick按钮的点击事件(event: ModalActionEvent) => void--
loading显示加载状态指示器boolean-false
...原生属性ButtonHTMLAttributes'id', 'className', ...-

useModal

type useModal = (initialVisible: boolean) => {
  visible: boolean
  setVisible: Dispatch<SetStateAction<boolean>>
  currentRef: MutableRefObject<boolean>
  bindings: {
    visible: boolean
    onClose: () => void
  }
}

ModalActionEvent

type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
  close: () => void
}
Add