总览

Fullscreen Modal 全屏模态

使用指南

同属于模态弹窗，但撑满整个屏幕，多用于图片预览等独立闭环流程的开始，或复杂信息及复杂交互的场景。

适用：

  • 用于对象信息的完整展示和操作，让用户获得的沉浸感和专注度最大化。如 Teambition 文件详情

  • 希望用户在不丢失当前页面的同时，进入一个独立的闭环流程，且该流程需要展示较多的内容信息量和复杂交互操作。如 Teambition 任务字段配置

不适用：

  • 无法独立闭环的流程。即需要频繁跳转至其他界面，或当前流程仅为某一流程的一部分时

  • 内容信息量较少，交互操作较轻量的场景，可以使用更小尺寸的模态容器承载

  • 无需强调用户的专注度和沉浸感的场景

API

Modal

参数说明类型默认值
defaultVisible是否默认可见，非受控Boolean-
visible是否默认可见，受控Boolean-
canCloseByEsc是否支持 esc 按键关闭弹层Booleantrue
onClose点击关闭按钮回调Function() => {}
titleModal标题，必选String-
titleEditableModal标题是否可编辑Boolean-
titleEditTooltip标题编辑图标提示文案String'点击即可编辑'
titleInputWidth可编辑时标题输入框的宽度Number,String-
onEditTitleChange标题编辑回调Function(title: string) => {}
descriptionModal描述String-
operations操作区ReactElement-
sideDrawer侧边栏内容ReactNode-
sideDrawerWidth侧边栏内容宽度Number400
sideDrawerLabel侧边栏切换显示Switch前labelString-
sideDrawerVisible侧边栏内容是否可见，受控Boolean-
onSideDrawerVisibleChange侧边栏内容切换可见回调Function(sideDrawerVisible: boolean) => {}