概述
模态可帮助用户执行与父视图相关的任务,而无需将他们带离当前的上下文。
模态通常用于短期和不频繁的任务,例如编辑或管理任务。模态中断了用户的工作流程。当处于活动状态时,用户被阻止访问页面内容,并且在模态任务完成或用户关闭模态之前无法返回到他们之前的工作流程。
构成元素
- 标题区域:支持标题、提示、副标题和标签,其中标题为必选项
- 关闭按钮:点击关闭模态
- 内容区域:模态用于放置内容的区域,不支持表格
- 操作区域:用于放置模态的操作,默认提供了确定、取消按钮
- 遮罩:通过遮罩让模态独立于当前视图,同时与上下文又有关联
尺寸
最小高度 :无
最大高度 :70%
最小宽度: 448px
最大宽度:70%
用法
什么时候使用
- 用于非沉浸式内容和简单任务
什么时候不使用
- 希望在弹窗里面展示表格,请使用抽屉
- 提供了简单的文字信息,希望用户做出选择,请使用对话框
- 你不想打断用户当前的操作
最佳实践
例举标准的用法,贴合实际业务场景。
行为
出现方式
模态伴随着半透明遮罩从屏幕中间出现。在模态中触发新的模态,新模态会遮住旧模态。
生命周期
点击关闭图标则不进行任何数据提交关闭模态
点击其他操作区域按钮则按照用户设定功能进行
全局变化
容器的规则
此组件以Z轴浮层形式出现,组件会覆盖屏幕上的内容,并始终出现在最顶层
在移动端模态会切换为抽屉展示