Modal Lab

v0.3.11 · Latest stable

上方配置面板、中间实时预览、下方生成代码。该 Lab 覆盖 Modal 主要可配置参数，不发起远程请求，也不会引入额外运行时依赖。

基础内容

场景 删除确认部署确认表单入口自定义id 标题 内容 This action cannot be undone.

尺寸、位置、动画

宽度模式 autopxCSS size宽度 560px 高度模式 autopxCSS size位置 centertopbottom动画 fadeslidezoom

Header 与关闭按钮

hideHeader hideCloseButtoncloseButtonLabel closeButtonText

交互行为

useModal draggabledragHandle headertitlebodyfooterpanelheader + body + footer closeOnEsc closeOnBackdrop

样式与自适应

preset defaultdeploy autoFitSizescrollMode bodyhybridviewportnone refitOnContentChangeautoFitMinWidth autoFitMinHeight

Footer 与诊断

hideFooterfooterAlign startcenterendbetweenconfirmText cancelText confirmAction hidedestroy footerButtonstraceId layoutStableFrames layoutStableOnRefit lifecycle/action hooks

Delete record×

This action cannot be undone.

import { openModal } from 'sodialog'
import 'sodialog/style.css'

openModal({
  title: 'Delete record',
  content: '<p>This action cannot be undone.</p>',
  width: 560,
  traceId: 'trace-modal-lab-001',
})

关联入口

Modal 组件文档Dialog APILegacy Demo ↗