浮层与反馈 / COMPONENT ATLAS

弹窗外壳ModalShell

为弹窗统一遮罩、面板和开合动画。标题栏和具体内容由调用方提供。

亲手试一试。

01 / LIVE PREVIEW
● ModalShell

STATES / 示例状态

打开关闭
在左侧预览中体验这枚组件。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
let mut visible = use_signal(|| false);
let mut closing = use_signal(|| false);
rsx! {
    div {
        button { onclick: move |_| visible.set(true), "打开弹窗" }
        ModalShell {
            visible,
            closing,
            title: "留住一片灵感",
            h2 { "留住一片灵感。" }
            button {
                onclick: move |_| {
                    closing.set(true);
                    visible.set(false);
                },
                "收好了"
            }
        }
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
visibleSignal<bool>必填弹窗显隐状态。
closingSignal<bool>必填共享关闭动画状态。
title&'static str必填弹窗无障碍名称。
childrenElement必填弹窗内部内容。
panel_class&'static strw-full max-w-lg面板宽度等布局样式。

操作方式

04 / INTERACTION
演示关闭按钮关闭示例弹窗
YGGDRASIL · 每一个细节,都有回应。src/components/ui.rs
© 2026 Yggdrasil