Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Overview

标题 + 描述 + Cancel/Continue 的基础确认框，点击 Show Dialog 打开。

GPUI · Live previewClick the trigger

Installation

Alert Dialog 是单个 Rust 文件（src/alert_dialog.rs），构建在 gpui-base 的模态原语之上。复制到你的 crate，或下载完整示例直接运行。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# alert_dialog.rs builds on the modal primitives5# re-exported at gpui_kit::base:6#   AlertDialog, AlertDialogTrigger, AlertDialogBackdrop,7#   AlertDialogPopup, AlertDialogTitle, AlertDialogDescription,8#   AlertDialogCancel, AlertDialogAction, DialogHandle

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --alert-dialog34# Other demos:5cargo run --locked -- --alert-dialog sm6cargo run --locked -- --alert-dialog media7cargo run --locked -- --alert-dialog sm-media8cargo run --locked -- --alert-dialog destructive

Usage

宿主视图持有 DialogHandle，用 AlertDialogSpec 描述内容，渲染时触发器与对话框本体都通过 handle 关联。

Example.rs

1use justdo_command::alert_dialog::{AlertDialogSpec, alert_dialog};2use justdo_command::button::Button;3use gpui_kit::base::{AlertDialogTrigger, DialogHandle};45// Keep the handle on your host view.6struct Host { handle: DialogHandle }78// In render: the trigger opens the dialog; the host renders it.9// (any IntoElement works as the trigger — our Button is one)10AlertDialogTrigger::new(Button::new("open").label("Show Dialog"))11    .handle(self.handle.clone())1213// Plus the composed dialog itself (backdrop + popup + parts):14alert_dialog(&spec, &self.handle, intro, |confirmed, _, _| {15    // true = confirm pressed, false = cancel / Escape16}, cx)

网页预览与桌面端运行同一份 Rust / GPUI 组件；点按 Show Dialog 打开，遮罩不可点击关闭。

Composition

组合结构与 shadcn/ui 的 Base UI 版本一一对应。模态行为、焦点围栏与遮罩由 gpui-base 原语提供，样式由本模块统一提供。

Structure

1AlertDialog                modal host · focus trap2├── AlertDialogTrigger     opens on press3└── AlertDialogPopup       centered card4    ├── AlertDialogMedia   optional icon box5    ├── AlertDialogTitle6    ├── AlertDialogDescription7    └── Footer8        ├── AlertDialogCancel   -> Cancel action9        └── AlertDialogAction   -> Confirm action

Accessibility

Keyboard

Tab 聚焦触发器，Enter Space 打开对话框
Escape 触发 Cancel 关闭对话框
Enter 在弹层内触发 Confirm 关闭
打开时焦点移入弹层并被围栏，关闭后还给触发器；遮罩按下不会关闭

Semantics

弹层携带 role="alertdialog"；Cancel 派发 Cancel、Action 派发 Confirm action。打开时背景淡出 + 卡片上浮入场，reduced-motion 下动画自动关闭。

API Reference

本模块暴露的配置与组合函数。模态原语由 gpui_kit::base 提供。

API	Signature	Notes
`AlertDialogSpec::new()`	`-> AlertDialogSpec`	Default size, no media, Cancel/Continue labels.
`.trigger/.title/.description(..)`	`impl Into<SharedString>`	Trigger label and popup copy.
`.cancel/.confirm(..)`	`impl Into<SharedString>`	Footer button labels.
`.size(..)`	`AlertDialogSize`	Default \| Sm — Sm narrows the card and stacks the footer.
`.media(..)`	`AlertDialogMedia`	Plus \| Bluetooth \| Trash icon box above the title.
`.destructive(bool)`	`bool`	Red confirm button and tinted media icon.
`.dark(bool)`	`bool`	Dark color scheme for scrim, card and buttons.
`alert_dialog(..)`	`spec, handle, intro, on_done, cx`	Composes backdrop + popup; on_done receives confirmed flag.
`DialogHandle`	`::new(open)`	Open state shared by trigger, host and imperative close.

Example.rs

1// on_ok / on_cancel run when Action / Cancel / Enter / Escape resolve2// the dialog; returning true lets it close.3AlertDialog::new(cx)4    .handle(self.handle.clone())5    .on_ok(|_, _, _| true)6    .on_cancel(|_, _, _| true)7    .on_open_change(|open, reason, _, _| { /* reopen, backdrop, ... */ })

Source & inspiration

结构与视觉参考 shadcn/ui Alert Dialog （Base UI 组合方式）。本页交互由 Rust / GPUI 绘制，模态原语来自 gpui-base 。