Skip to main content

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};