跳到主要内容

模态框
草稿
Storybook

概述​

模态框用于向用户显示需要立即关注或对其当前用户流程至关重要的内容。当模态框打开时，用户无法与模态框背后的页面内容交互，并且在用户完成要求或关闭模态框之前，无法返回到之前的工作流程。

使用时机​

  • 需要用户立即响应。
  • 通知用户与其当前工作相关的紧急信息。
  • 确认用户决策。

不使用时机​

  • 当用户需要重复进行某项任务时，避免使用模态框。
  • 不要将模态框用于与当前工作流程无关的非必要信息。

用法​

主要组件有以下属性

  • title - 模态框的标题或自定义头部元素
  • className
  • contentClassName - 模态框内容的特定类名
  • closeOnEscape
  • closeOnBackdropClick
  • trapFocus - 是否在焦点范围卸载后，将焦点恢复到焦点范围加载时聚焦的元素。
  • isOpen
  • onDismiss
  • onClickBackdrop - 如果未设置，并且设置了 onDismiss，则会调用 onDismiss

ModalTabsHeader - 带有标签页的自定义头部元素，具有以下属性

  • icon
  • title
  • tabs
  • activeTab
  • onChangeTab

类型和行为​

  1. 基本模态框：带有默认头部、主要内容、关闭按钮和/或操作按钮的基本模态框。

  2. 使用 contentClassName 属性的模态框：在这种情况下，模态框内容应用了特定的类。

  3. 带有标签页的模态框：在这种情况下，模态框带有标签页，每个标签页都有其主要内容和按钮。

可访问性​

对话框 (模态框) 模式 构建模态框时请检查键盘行为。我们注意到，当内容溢出时，用户无法滚动，除非

  • 模态框底部包含交互元素，例如按钮。
  • 内容具有 tabIndex = 0，因此可以通过键盘聚焦。

链接和资源​

Storybook 库​

演练场​