Skip to main content
Yggdrasil

ModalShell

yggdrasil::components::ui

Function ModalShell 

Source 
pub fn ModalShell(props: ModalShellProps) -> impl IntoView
Expand description

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

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

§关闭路径与同帧动画

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

面板上的点击不会冒泡：面板内的站内链接因此收不到文档级路由协调器，会退化为整页跳转， 弹窗内容里需要导航时请用 crate::navigation::push。

§Props

  • visible / closing：与调用方共享的显隐 / 关闭动画信号。
  • title：面板的 aria-label（不渲染可见标题——各调用方的标题栏自行渲染）。
  • role：面板角色，默认 dialog；危险确认传 alertdialog。
  • overlay_padding：遮罩内边距（响应式内边距因弹窗尺寸而异，默认 "p-6"）。
  • panel_class：在共享面板底座上追加的宽度等布局类（默认 "w-full max-w-lg"）。
  • children：面板内容（含调用方自己的标题栏、× 按钮等）；显示期间渲染，每次打开重新创建。

§Required Props

  • visible: [RwSignal<bool>]
  • closing: [RwSignal<bool>]
  • title: impl Into<String>
  • children: [ChildrenFn]

§Optional Props