pub fn button<C, B>(
props: ButtonProps,
overrides: B,
children: C,
) -> impl BundleExpand description
Template function to spawn a button.
ยงArguments
props- construction properties for the button.overrides- a bundle of components that are merged in with the normal button components.children- aSpawnableListof child elements, such as a label or icon for the button.
Examples found in repository?
examples/ui/feathers.rs (lines 98-102)
60fn demo_root() -> impl Bundle {
61 (
62 Node {
63 width: percent(100),
64 height: percent(100),
65 align_items: AlignItems::Start,
66 justify_content: JustifyContent::Start,
67 display: Display::Flex,
68 flex_direction: FlexDirection::Column,
69 row_gap: px(10),
70 ..default()
71 },
72 TabGroup::default(),
73 ThemeBackgroundColor(tokens::WINDOW_BG),
74 children![(
75 Node {
76 display: Display::Flex,
77 flex_direction: FlexDirection::Column,
78 align_items: AlignItems::Stretch,
79 justify_content: JustifyContent::Start,
80 padding: UiRect::all(px(8)),
81 row_gap: px(8),
82 width: percent(30),
83 min_width: px(200),
84 ..default()
85 },
86 children![
87 (
88 Node {
89 display: Display::Flex,
90 flex_direction: FlexDirection::Row,
91 align_items: AlignItems::Center,
92 justify_content: JustifyContent::Start,
93 column_gap: px(8),
94 ..default()
95 },
96 children![
97 (
98 button(
99 ButtonProps::default(),
100 (),
101 Spawn((Text::new("Normal"), ThemedText))
102 ),
103 observe(|_activate: On<Activate>| {
104 info!("Normal button clicked!");
105 })
106 ),
107 (
108 button(
109 ButtonProps::default(),
110 (InteractionDisabled, DemoDisabledButton),
111 Spawn((Text::new("Disabled"), ThemedText))
112 ),
113 observe(|_activate: On<Activate>| {
114 info!("Disabled button clicked!");
115 })
116 ),
117 (
118 button(
119 ButtonProps {
120 variant: ButtonVariant::Primary,
121 ..default()
122 },
123 (),
124 Spawn((Text::new("Primary"), ThemedText))
125 ),
126 observe(|_activate: On<Activate>| {
127 info!("Disabled button clicked!");
128 })
129 ),
130 ]
131 ),
132 (
133 Node {
134 display: Display::Flex,
135 flex_direction: FlexDirection::Row,
136 align_items: AlignItems::Center,
137 justify_content: JustifyContent::Start,
138 column_gap: px(1),
139 ..default()
140 },
141 children![
142 (
143 button(
144 ButtonProps {
145 corners: RoundedCorners::Left,
146 ..default()
147 },
148 (),
149 Spawn((Text::new("Left"), ThemedText))
150 ),
151 observe(|_activate: On<Activate>| {
152 info!("Left button clicked!");
153 })
154 ),
155 (
156 button(
157 ButtonProps {
158 corners: RoundedCorners::None,
159 ..default()
160 },
161 (),
162 Spawn((Text::new("Center"), ThemedText))
163 ),
164 observe(|_activate: On<Activate>| {
165 info!("Center button clicked!");
166 })
167 ),
168 (
169 button(
170 ButtonProps {
171 variant: ButtonVariant::Primary,
172 corners: RoundedCorners::Right,
173 },
174 (),
175 Spawn((Text::new("Right"), ThemedText))
176 ),
177 observe(|_activate: On<Activate>| {
178 info!("Right button clicked!");
179 })
180 ),
181 ]
182 ),
183 (
184 button(
185 ButtonProps::default(),
186 (),
187 Spawn((Text::new("Button"), ThemedText))
188 ),
189 observe(|_activate: On<Activate>| {
190 info!("Wide button clicked!");
191 })
192 ),
193 (
194 checkbox(Checked, Spawn((Text::new("Checkbox"), ThemedText))),
195 observe(
196 |change: On<ValueChange<bool>>,
197 query: Query<Entity, With<DemoDisabledButton>>,
198 mut commands: Commands| {
199 info!("Checkbox clicked!");
200 let mut button = commands.entity(query.single().unwrap());
201 if change.value {
202 button.insert(InteractionDisabled);
203 } else {
204 button.remove::<InteractionDisabled>();
205 }
206 let mut checkbox = commands.entity(change.source);
207 if change.value {
208 checkbox.insert(Checked);
209 } else {
210 checkbox.remove::<Checked>();
211 }
212 }
213 )
214 ),
215 (
216 checkbox(
217 InteractionDisabled,
218 Spawn((Text::new("Disabled"), ThemedText))
219 ),
220 observe(|_change: On<ValueChange<bool>>| {
221 warn!("Disabled checkbox clicked!");
222 })
223 ),
224 (
225 checkbox(
226 (InteractionDisabled, Checked),
227 Spawn((Text::new("Disabled+Checked"), ThemedText))
228 ),
229 observe(|_change: On<ValueChange<bool>>| {
230 warn!("Disabled checkbox clicked!");
231 })
232 ),
233 (
234 Node {
235 display: Display::Flex,
236 flex_direction: FlexDirection::Column,
237 row_gap: px(4),
238 ..default()
239 },
240 RadioGroup,
241 observe(
242 |value_change: On<ValueChange<Entity>>,
243 q_radio: Query<Entity, With<RadioButton>>,
244 mut commands: Commands| {
245 for radio in q_radio.iter() {
246 if radio == value_change.value {
247 commands.entity(radio).insert(Checked);
248 } else {
249 commands.entity(radio).remove::<Checked>();
250 }
251 }
252 }
253 ),
254 children![
255 radio(Checked, Spawn((Text::new("One"), ThemedText))),
256 radio((), Spawn((Text::new("Two"), ThemedText))),
257 radio((), Spawn((Text::new("Three"), ThemedText))),
258 radio(
259 InteractionDisabled,
260 Spawn((Text::new("Disabled"), ThemedText))
261 ),
262 ]
263 ),
264 (
265 Node {
266 display: Display::Flex,
267 flex_direction: FlexDirection::Row,
268 align_items: AlignItems::Center,
269 justify_content: JustifyContent::Start,
270 column_gap: px(8),
271 ..default()
272 },
273 children![
274 (toggle_switch((),), observe(checkbox_self_update)),
275 (
276 toggle_switch(InteractionDisabled,),
277 observe(checkbox_self_update)
278 ),
279 (
280 toggle_switch((InteractionDisabled, Checked),),
281 observe(checkbox_self_update)
282 ),
283 ]
284 ),
285 (
286 slider(
287 SliderProps {
288 max: 100.0,
289 value: 20.0,
290 ..default()
291 },
292 (SliderStep(10.), SliderPrecision(2)),
293 ),
294 observe(slider_self_update)
295 ),
296 (
297 Node {
298 display: Display::Flex,
299 flex_direction: FlexDirection::Row,
300 justify_content: JustifyContent::SpaceBetween,
301 ..default()
302 },
303 children![Text("Srgba".to_owned()), color_swatch(SwatchType::Rgb),]
304 ),
305 (
306 color_slider(
307 ColorSliderProps {
308 value: 0.5,
309 channel: ColorChannel::Red
310 },
311 ()
312 ),
313 observe(
314 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
315 color.rgb_color.red = change.value;
316 }
317 )
318 ),
319 (
320 color_slider(
321 ColorSliderProps {
322 value: 0.5,
323 channel: ColorChannel::Green
324 },
325 ()
326 ),
327 observe(
328 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
329 color.rgb_color.green = change.value;
330 },
331 )
332 ),
333 (
334 color_slider(
335 ColorSliderProps {
336 value: 0.5,
337 channel: ColorChannel::Blue
338 },
339 ()
340 ),
341 observe(
342 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
343 color.rgb_color.blue = change.value;
344 },
345 )
346 ),
347 (
348 color_slider(
349 ColorSliderProps {
350 value: 0.5,
351 channel: ColorChannel::Alpha
352 },
353 ()
354 ),
355 observe(
356 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
357 color.rgb_color.alpha = change.value;
358 },
359 )
360 ),
361 (
362 Node {
363 display: Display::Flex,
364 flex_direction: FlexDirection::Row,
365 justify_content: JustifyContent::SpaceBetween,
366 ..default()
367 },
368 children![Text("Hsl".to_owned()), color_swatch(SwatchType::Hsl),]
369 ),
370 (
371 color_slider(
372 ColorSliderProps {
373 value: 0.5,
374 channel: ColorChannel::HslHue
375 },
376 ()
377 ),
378 observe(
379 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
380 color.hsl_color.hue = change.value;
381 },
382 )
383 ),
384 (
385 color_slider(
386 ColorSliderProps {
387 value: 0.5,
388 channel: ColorChannel::HslSaturation
389 },
390 ()
391 ),
392 observe(
393 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
394 color.hsl_color.saturation = change.value;
395 },
396 )
397 ),
398 (
399 color_slider(
400 ColorSliderProps {
401 value: 0.5,
402 channel: ColorChannel::HslLightness
403 },
404 ()
405 ),
406 observe(
407 |change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
408 color.hsl_color.lightness = change.value;
409 },
410 )
411 )
412 ]
413 ),],
414 )
415}