浮层与反馈 / COMPONENT ATLAS
弹窗外壳ModalShell
为弹窗统一遮罩、面板和开合动画。标题栏和具体内容由调用方提供。
亲手试一试。
01 / LIVE PREVIEWSTATES / 示例状态
打开关闭
在左侧预览中体验这枚组件。INTERACTIVE SPECIMEN · 跟随全站主题
用法
02 / USAGE下方展示组件的调用方式。
let mut visible = use_signal(|| false);
let mut closing = use_signal(|| false);
rsx! {
div {
button { : move |_| visible.set(true), "打开弹窗" }
ModalShell {
visible,
closing,
: "留住一片灵感",
h2 { "留住一片灵感。" }
button {
: move |_| {
closing.set(true);
visible.set(false);
},
"收好了"
}
}
}
}主要属性
03 / PROPERTIES| 属性 / 类型 | 默认值 | 说明 |
|---|---|---|
visibleSignal<bool> | 必填 | 弹窗显隐状态。 |
closingSignal<bool> | 必填 | 共享关闭动画状态。 |
title&'static str | 必填 | 弹窗无障碍名称。 |
childrenElement | 必填 | 弹窗内部内容。 |
panel_class&'static str | w-full max-w-lg | 面板宽度等布局样式。 |
操作方式
04 / INTERACTION演示关闭按钮关闭示例弹窗