Skip to main content

ModalShell

Function ModalShell 

Source
pub fn ModalShell(_: ModalShellProps) -> Element
Expand description

通用弹窗外壳:遮罩 + 面板容器 + 开合动画状态机(opened / closing / 退出计时)。

收敛 AssetUploadModal / AssetPickerModal 曾各自照抄的一份遮罩 + 面板 + 开合动画 状态机,顺带补齐两者曾意外分叉的 role="dialog" / aria-modal / aria-label (此前只有 AssetPickerModal 有)。调用方仍各自负责标题栏、内容区等具体内容 (经 children 传入),以及自身域相关的开关副作用(如重置搜索词/选中集)。

§关闭路径与同帧动画

本组件自身处理遮罩点击关闭。调用方若在 children 内还有别的关闭入口 (标题栏 × 按钮、选中即关闭等),必须用与本组件相同的写法同步先置 closing.set(true) 再置 visible.set(false)——同一帧内让存活元素换上 .is-closing 类,过渡动画才能从可见态播放(只翻 visible、等下一帧的 use_effect 兜底补置 closing 为时已晚,元素已被提前卸载,动画会变成 瞬间消失而非淡出)。因此 visible / closing 是与调用方共享的 Signal, 而非本组件内部私有状态;opened(mount 守卫)才是本组件私有的。

§Props

  • visible / closing:与调用方共享的显隐 / 关闭动画信号。
  • title:面板的 aria-label(不渲染可见标题——各调用方的标题栏自行渲染)。
  • overlay_padding:遮罩内边距(响应式内边距因弹窗尺寸而异,默认 "p-6")。
  • panel_class:在共享面板底座上追加的宽度等布局类(默认 "w-full max-w-lg")。
  • children:面板内容(含调用方自己的标题栏、× 按钮等)。

§Props

For details, see the props struct definition.