zng/wizard.rs
1#![cfg(feature = "wizard")]
2
3//! Wizard widget and related types.
4//!
5//! By default the [`Wizard!`] widget presents the traditional multi-step dialog/form experience,
6//! but it is highly customizable. The widget is composed of four panels: header, footer, side and content,
7//! each panel can be customized using contextual properties.
8//!
9//! The [`Page`] type defines widget builders for the content of each panel when the page is open. It also
10//! defines variables that control how navigation works to and from the page.
11//!
12//! [`Wizard!`]: struct@Wizard
13//!
14//! ```
15//! use zng::focus::{TabIndex, tab_index};
16//! use zng::prelude::*;
17//! use zng::wizard::{self, WIZARD, Wizard};
18//! # let _scope = zng::APP.defaults();
19//!
20//! let wizard_id = WidgetId::new_unique();
21//!
22//! // basic page with defaults depending on page index
23//! let basic_page = wizard::Page::new(
24//! "Header",
25//! "Description of what this pages is asking or doing",
26//! wgt_fn!(|_| {
27//! Text! {
28//! txt = "Custom page content.";
29//! }
30//! }),
31//! );
32//!
33//! // more customized page, with wizard commands control
34//! let can_cancel = var(true);
35//! let can_begin = var(true);
36//! let mut page = wizard::Page::new(
37//! "Commands",
38//! "What wizard commands are enabled?",
39//! wgt_fn!(can_cancel, can_begin, |args: wizard::PageArgs| {
40//! Stack! {
41//! // on enter page
42//! widget::on_init = hn!(can_cancel, |_| {
43//! can_cancel.set(false);
44//! });
45//! // on exit page
46//! widget::on_deinit = hn!(can_cancel, |_| {
47//! can_cancel.set(true);
48//! });
49//! direction = StackDirection::top_to_bottom();
50//! spacing = 5;
51//! toggle::style_fn = style_fn!(|_| toggle::CheckStyle!());
52//! children = ui_vec![
53//! Text!("Select what wizard commands are enabled:"),
54//! Toggle! {
55//! checked = can_cancel.clone();
56//! child = Text!("CANCEL_CMD");
57//! },
58//! Toggle! {
59//! checked = can_begin.clone();
60//! child = Text!("BEGIN_CMD");
61//! },
62//! Text!("Also wizard navigation commands:"),
63//! Toggle! {
64//! checked = args.can_back;
65//! child = Text!("BACK_CMD");
66//! },
67//! ];
68//! }
69//! }),
70//! );
71//! // by default the last page only has BACK and BEGIN buttons
72//! page.footer = wgt_fn!(|_| {
73//! ui_vec![
74//! Button! {
75//! cmd = wizard::BACK_CMD.scoped(wizard_id);
76//! tab_index = TabIndex::FIRST - 1;
77//! },
78//! Button! {
79//! cmd = wizard::BEGIN_CMD.scoped(wizard_id);
80//! tab_index = TabIndex::FIRST;
81//! style_fn = style_fn!(|_| zng::button::PrimaryStyle!());
82//! },
83//! Button! {
84//! cmd = wizard::CANCEL_CMD.scoped(wizard_id);
85//! tab_index = TabIndex::FIRST - 2;
86//! },
87//! ]
88//! .into_node()
89//! });
90//!
91//! # fn some_status_page() -> wizard::Page { wizard::Page::nil() }
92//! # async fn some_task() { task::deadline(500.ms()).await }
93//! # fn some_results_page() -> wizard::Page { wizard::Page::nil() }
94//! # let _ =
95//! Wizard! {
96//! id = wizard_id;
97//! // side_background_fn = wgt_fn!(|_| flood(colors::RED));
98//! // header_background_fn = wgt_fn!(|_| flood(colors::BLUE));
99//! pages = vec![basic_page, page];
100//! can_cancel;
101//! on_cancel = hn!(|a| {
102//! println!("Cancel!");
103//! WINDOW.close();
104//! });
105//! begin_cmd_name = "Apply";
106//! can_begin;
107//! on_begin = async_hn!(|a| {
108//! // go to custom page
109//! WIZARD.selected_page().set(some_status_page());
110//! // run task
111//! some_task().await;
112//! // go to results page with the finish button
113//! WIZARD.selected_page().set(some_results_page());
114//! });
115//! on_finish = hn!(|a| {
116//! println!("Finish!");
117//! WINDOW.close();
118//! });
119//! }
120//! # ;
121//! ```
122//!
123//! # Full API
124//!
125//! See [`zng_wgt_wizard`] for the full API.
126
127pub use zng_wgt_wizard::{
128 BACK_CMD, BEGIN_CMD, CANCEL_CMD, ContentFnArgs, FINISH_CMD, FooterFnArgs, HeaderFnArgs, NEXT_CMD, Page, PageArgs, PanelFnArgs,
129 SideFnArgs, WIZARD, Wizard, content_fn, footer_extra_fn, footer_fn, header_background_fn, header_fn, panel_fn, side_background_fn,
130 side_extra_fn, side_fn,
131};