Yggdrasil
搜索⌘K

弹窗外壳

ModalShell浮层与反馈

对话框外壳：遮罩、面板与开合动画。打开时接管焦点，Tab 只在弹窗内循环，Esc 或点遮罩关闭后把焦点还给触发器。

预览

属性

名称类型默认值说明
visibleRwSignal<bool>必填弹窗显隐状态。
closingRwSignal<bool>必填共享关闭动画状态。
titleString必填弹窗无障碍名称。
childrenChildrenFn必填弹窗内部内容。
panel_classStringw-full max-w-lg面板宽度等布局样式。
roleStringdialog面板角色；危险确认传 alertdialog。

键盘

演示关闭按钮
关闭示例弹窗

用法

src/components/ui.rs
Leptos view!
let visible = RwSignal::new(false);
let closing = RwSignal::new(false);

view! {
    <div>
        <button on:click=move |_| visible.set(true)>"\u6253\u5F00\u5F39\u7A97"</button>
        <ModalShell visible=visible closing=closing title="\u7559\u4F4F\u4E00\u7247\u7075\u611F">
            <h2>"\u7559\u4F4F\u4E00\u7247\u7075\u611F\u3002"</h2>
            <button on:click=move |_| {
                closing.set(true);
                visible.set(false);
            }>"\u6536\u597D\u4E86"</button>
        </ModalShell>
    </div>
}