GPUX v0.1
AI

Native UI Book · 05 Overlays

弹窗、抽屉与命令面板 (Overlays & Command Palette)

提供模态对话框、侧滑抽屉、上下文菜单以及支持模糊搜索的全局命令面板。

在桌面与宽屏 Web 端（Breakpoint::Expanded）呈现为中心模态对话框，而在移动端竖屏（Breakpoint::Compact）自动切换为避让底部手势横条的 BottomSheet 抽屉：

rust 
use gpux::prelude::*;
use gpux::kit::button::{Button, ButtonVariants};
use gpux::kit::{h_flex, v_flex, ActiveTheme, StyledExt};

pub fn render_adaptive_overlay(
    rc: &ResponsiveContext,
    cx: &mut Context<Self>,
) -> impl IntoElement {
    let is_compact = rc.is_compact();

    v_flex()
        .w(if is_compact { px(rc.viewport_width) } else { px(460.0) })
        .p_5()
        .pb(px(20.0 + rc.safe_area.bottom))
        .rounded_xl()
        .bg(cx.theme().popover)
        .border_1()
        .border_color(cx.theme().border)
        .gap_4()
        .child("Drain Node · Confirmation")
        .child(
            h_flex()
                .justify_end()
                .gap_2()
                .child(Button::new("cancel").ghost().label("Cancel"))
                .child(Button::new("confirm").danger().label("Confirm Drain")),
        )
}