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 ↗