本文へスキップ
QuickGUI

Dialog

フォーカスの閉じ込め、閉じる操作、正確なトランジション完了を備えたウィンドウ内モーダルです。

デモを読み込み中…

#インポート

quickgui から Dialog をインポートします。

use quickgui::*;

#使い方

let dialog = Dialog::new("save", open);
dialog.root().child(dialog.title_with(text("Save changes")))

#構成

  • Dialog::root
  • Dialog::trigger
  • Dialog::portal
  • Dialog::backdrop
  • Dialog::viewport
  • Dialog::popup
  • Dialog::title
  • Dialog::description
  • Dialog::close

#API リファレンス

項目を展開すると説明と完全なシグネチャが表示されます。ダッシュは宣言に既定値が記載されていないことを示します。

Dialog

ソースを見る
pub fn new(id: impl Into<ElementId>, open: bool) -> Self

Declare an ordinary modal dialog.

alertpub fn alert(id: impl Into<ElementId>, open: bool) -> Self—

Declare a consequential alert dialog. Escape remains enabled, while a backdrop press is blocked without dismissing by default.

pub fn alert(id: impl Into<ElementId>, open: bool) -> Self
ソースを見る
with_kindpub fn with_kind(id: impl Into<ElementId>, open: bool, kind: DialogKind) -> Self—

Configures with kind for this part.

pub fn with_kind(id: impl Into<ElementId>, open: bool, kind: DialogKind) -> Self
ソースを見る
is_openpub const fn is_open(self) -> bool—

Configures is open for this part.

pub const fn is_open(self) -> bool
ソースを見る
kindpub const fn kind(self) -> DialogKind—

Configures kind for this part.

pub const fn kind(self) -> DialogKind
ソースを見る
initial_focuspub fn initial_focus(mut self, focus: impl Into<ElementId>) -> Self—

Prefer one mounted descendant when this dialog opens. Without an explicit target, the focus trap chooses its first enabled Tab stop and falls back to the popover root when no interactive descendant exists.

pub fn initial_focus(mut self, focus: impl Into<ElementId>) -> Self
ソースを見る
restore_focus_topub fn restore_focus_to(mut self, focus: impl Into<ElementId>) -> Self—

Restore focus to one stable control after every dismissal path.

pub fn restore_focus_to(mut self, focus: impl Into<ElementId>) -> Self
ソースを見る
dismiss_on_escapepub const fn dismiss_on_escape(mut self, dismiss: bool) -> Self—

Configures dismiss on escape for this part.

pub const fn dismiss_on_escape(mut self, dismiss: bool) -> Self
ソースを見る
dismiss_on_backdroppub const fn dismiss_on_backdrop(mut self, dismiss: bool) -> Self—

Configures dismiss on backdrop for this part.

pub const fn dismiss_on_backdrop(mut self, dismiss: bool) -> Self
ソースを見る
root_idpub fn root_id(self) -> ElementId—

Configures root id for this part.

pub fn root_id(self) -> ElementId
ソースを見る
backdrop_idpub fn backdrop_id(self) -> ElementId—

Configures backdrop id for this part.

pub fn backdrop_id(self) -> ElementId
ソースを見る
popover_idpub fn popover_id(self) -> ElementId—

Configures popover id for this part.

pub fn popover_id(self) -> ElementId
ソースを見る
title_idpub fn title_id(self) -> ElementId—

Configures title id for this part.

pub fn title_id(self) -> ElementId
ソースを見る
description_idpub fn description_id(self) -> ElementId—

Configures description id for this part.

pub fn description_id(self) -> ElementId
ソースを見る
close_idpub fn close_id(self) -> ElementId—

Configures close id for this part.

pub fn close_id(self) -> ElementId
ソースを見る
viewport_idpub fn viewport_id(self) -> ElementId—

Stable identity of the scrolling viewport between the backdrop and the popup.

pub fn viewport_id(self) -> ElementId
ソースを見る
popover_focuspub fn popover_focus(self) -> FocusHandle—

Configures popover focus for this part.

pub fn popover_focus(self) -> FocusHandle
ソースを見る
focus_initialpub fn focus_initial(self, cx: &mut EventContext)—

Request the declared initial focus in the same event that mounts the dialog.

pub fn focus_initial(self, cx: &mut EventContext)
ソースを見る
focus_restorepub fn focus_restore(self, cx: &mut EventContext)—

Restore the declared focus after an explicit close action. Escape and backdrop dismissal already use the same retained target automatically.

pub fn focus_restore(self, cx: &mut EventContext)
ソースを見る

Dialog::trigger_with

ソースを見る
pub fn trigger_with(self, id: impl Into<ElementId>, trigger: Element) -> Element

Decorate an application-owned trigger without adding appearance.

Dialog::trigger

ソースを見る
pub fn trigger(self, id: impl Into<ElementId>) -> Element

Create the unstyled trigger part. Use [`Self::trigger_with`] to supply an existing element.

Dialog::root_with

ソースを見る
pub fn root_with(self, root: Element) -> Element

Decorate the full-window portal and active modal focus boundary.

Dialog::root

ソースを見る
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

Dialog::backdrop_with

ソースを見る
pub fn backdrop_with(self, backdrop: Element) -> Element

Decorate the caller-owned visual backdrop.

Dialog::backdrop

ソースを見る
pub fn backdrop(self) -> Element

Create the unstyled backdrop part. Use [`Self::backdrop_with`] to supply an existing element.

Dialog::popup_with

ソースを見る
pub fn popup_with(self, popover: Element) -> Element

Decorate the caller-owned modal popover. The popover is a negative-Tab-index focus fallback. Enabled descendant Tab stops are chosen first when the enclosing trap mounts. Title and description relationships project only when the corresponding parts are mounted, so incomplete compositions never emit dangling native node references.

Dialog::popup

ソースを見る
pub fn popup(self) -> Element

Create the unstyled popup part. Use [`Self::popup_with`] to supply an existing element.

Dialog::viewport_with

ソースを見る
pub fn viewport_with(self, viewport: Element) -> Element

Decorate the caller-owned scrolling viewport the popup sits inside, Base UI's Viewport. A dialog taller than the window must scroll as one surface rather than clipping its own content, and the scroll must live outside the popup so the popup keeps its own padding and shadow. QuickGUI supplies the stable identity and the scroll container; size, alignment, and padding stay application-owned.

Dialog::viewport

ソースを見る
pub fn viewport(self) -> Element

Create the unstyled viewport part. Use [`Self::viewport_with`] to supply an existing element.

Dialog::title_with

ソースを見る
pub fn title_with(self, title: Element) -> Element

Assign the stable visible label target used by the popover.

Dialog::title

ソースを見る
pub fn title(self) -> Element

Create the unstyled title part. Use [`Self::title_with`] to supply an existing element.

Dialog::description_with

ソースを見る
pub fn description_with(self, description: Element) -> Element

Assign the stable visible description target used by the popover.

Dialog::description

ソースを見る
pub fn description(self) -> Element

Create the unstyled description part. Use [`Self::description_with`] to supply an existing element.

Dialog::close_with

ソースを見る
pub fn close_with(self, label: impl Into<std::sync::Arc<str>>, close: Element) -> Element

Decorate a caller-owned close control with button behavior and no visual defaults.

Dialog::close

ソースを見る
pub fn close(self, label: impl Into<std::sync::Arc<str>>) -> Element

Create the unstyled close part. Use [`Self::close_with`] to supply an existing element.