1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
//! Button widget, styles and properties.
//!
//! A simple clickable container widget, it can be used by directly handling the click events or by setting it to
//! operate a [`Command`].
//!
//! [`Command`]: crate::event::Command
//!
//! # Click Events
//!
//! The button widget implements the [`gesture::on_click`] event so you can use it directly, but like any
//! other widget all events can be set. The example below demonstrates both ways of setting events.
//!
//! [`gesture::on_click`]: fn@crate::gesture::on_click
//!
//! ```
//! use zng::prelude::*;
//!
//! # fn example() {
//! let count = var(0u8);
//! # let _ =
//! Button! {
//! child = Text!(count.map(|c| match *c {
//! 0 => Txt::from("Click Me!"),
//! 1 => Txt::from("Clicked 1 time."),
//! n => formatx!("Clicked {n} times."),
//! }));
//! on_click = hn!(count, |_| {
//! count.set(count.get() + 1);
//! });
//! gesture::on_pre_click = hn!(|args| {
//! if count.get() == 10 {
//! args.propagation.stop();
//! count.set(0u8);
//! }
//! });
//! }
//! # ; }
//! ```
//!
//! # Command
//!
//! Instead of handling events directly the button widget can be set to represents a command.
//! If the [`cmd`](struct@Button#method.cmd) property is set the button widget will automatically set properties
//! from command metadata, you can manually set some of these properties to override the command default.
//!
//! ```
//! use zng::prelude::*;
//!
//! # fn example() {
//! # let _ =
//! Stack!(
//! left_to_right,
//! 5,
//! ui_vec![
//! // shorthand
//! Button!(zng::clipboard::COPY_CMD),
//! // cmd with custom child
//! Button! {
//! cmd = zng::clipboard::PASTE_CMD;
//! child = Text!("Custom Label");
//! },
//! ]
//! )
//! # ; }
//! ```
//!
//! The properties a command button sets are documented in the [`cmd`](struct@Button#method.cmd) property docs.
//! Of particular importance is the [`widget::visibility`], it is set so that the button is only visible if
//! the command has any handlers, enabled or disabled, this is done because commands are considered irrelevant
//! in the current context if they don't even have a disabled handler. The example above will only be
//! visible if you set handlers for those commands.
//!
//! ```
//! # use zng::prelude::*;
//! # fn example() {
//! # fn cmd_btn_example() -> UiNode { widget::node::UiNode::nil() }
//! # let _ =
//! zng::clipboard::COPY_CMD
//! .on_event(true, true, false, hn!(|_| println!("copy")))
//! .perm();
//! zng::clipboard::PASTE_CMD
//! .on_event(true, true, false, hn!(|_| println!("paste")))
//! .perm();
//! Window! {
//! child = cmd_btn_example();
//! }
//! # ; }
//! ```
//!
//! [`widget::visibility`]: fn@crate::widget::visibility
//!
//! # Style
//!
//! The button widget is styleable, the [`style_fn`](fn@style_fn) property can be set in any parent widget or the button
//! itself to extend or replace the button style.
//!
//! ## Base Colors
//!
//! The default style derive all colors from the [`base_color`](fn@crate::color::base_color), so if you
//! only want to change color of buttons you can use this property.
//!
//! The example below extends the button style to change the button color to red when it represents
//! an specific command.
//!
//! ```
//! use zng::prelude::*;
//! use zng::{button, color::base_color};
//!
//! # fn example() { let _ =
//! Window! {
//! button::style_fn = Style! {
//! when *#{button::BUTTON.cmd()} == Some(window::cmd::CLOSE_CMD) {
//! base_color = color::LightDark {
//! // light theme base
//! light: colors::WHITE.with_alpha(80.pct()).mix_normal(colors::RED),
//! // dark theme base
//! dark: colors::BLACK.with_alpha(80.pct()).mix_normal(colors::RED),
//! };
//! }
//! };
//! }
//! # ; }
//! ```
//!
//! # Full API
//!
//! See [`zng_wgt_button`] for the full widget API.
pub use ;