Component Modal

Modal

A modal dialog panel shell.

This component only renders the dialog panel (title/content/actions). It does not implement overlay placement, focus trapping, or keyboard dismissal. Those behaviors live at the application layer.

适用场景

• 你在 app/widget 层已经有 overlay（遮罩/层管理）能力，需要一个统一样式的对话框面板。
• 需要标准化的 slots：标题 / 内容 / 底部按钮区。

不适合：

• 你希望组件自己负责打开/关闭、遮罩、焦点锁定、Esc 关闭。 这些行为属于“交互生命周期管理”，建议放在 widget 层（例如未来的 ModalLayer）。

API

• modal()：构造器
• title(...)：标题（可选）
• content(...)：主体内容
• actions(...)：底部按钮区（可选）
• width(px(...))：宽度（默认 520px）
• bg(...) / border(...)：覆盖 theme 色

配套 helpers：

• modal_actions_row([...])：右对齐按钮行
• modal_primary_action("...")：主按钮样式（可用于 confirm）

Example

use yororen_ui::component::{
    button, modal, modal_actions_row,
};
use yororen_ui::theme::ActionVariantKind;

let view = modal()
    .title("Delete server?")
    .content("This action cannot be undone.")
    .actions(modal_actions_row([
        button().variant(ActionVariantKind::Neutral).child("Cancel").into_any_element(),
        button().variant(ActionVariantKind::Danger).child("Delete").into_any_element(),
    ]));

Example: 自定义宽度 + 更复杂内容

use gpui::px;
use yororen_ui::component::{label, modal, modal_actions_row, button};
use yororen_ui::theme::ActionVariantKind;

let view = modal()
    .width(px(640.))
    .title("Advanced settings")
    .content(
        label("这里可以放任意布局：表单、列表、说明文本等。")
    )
    .actions(modal_actions_row([
        button().variant(ActionVariantKind::Neutral).child("Close").into_any_element(),
        button().variant(ActionVariantKind::Primary).child("Save").into_any_element(),
    ]));