1use gpui::{AnyView, ClickEvent};
2
3use crate::{ButtonLike, ButtonLikeRounding, ElevationIndex, TintColor, prelude::*};
4
5/// The position of a [`ToggleButton`] within a group of buttons.
6#[derive(Debug, PartialEq, Eq, Clone, Copy)]
7pub enum ToggleButtonPosition {
8 /// The toggle button is first in the group.
9 First,
10
11 /// The toggle button is in the middle of the group (i.e., it is not the first or last toggle button).
12 Middle,
13
14 /// The toggle button is last in the group.
15 Last,
16}
17
18#[derive(IntoElement, RegisterComponent)]
19pub struct ToggleButton {
20 base: ButtonLike,
21 position_in_group: Option<ToggleButtonPosition>,
22 label: SharedString,
23 label_color: Option<Color>,
24}
25
26impl ToggleButton {
27 pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
28 Self {
29 base: ButtonLike::new(id),
30 position_in_group: None,
31 label: label.into(),
32 label_color: None,
33 }
34 }
35
36 pub fn color(mut self, label_color: impl Into<Option<Color>>) -> Self {
37 self.label_color = label_color.into();
38 self
39 }
40
41 pub fn position_in_group(mut self, position: ToggleButtonPosition) -> Self {
42 self.position_in_group = Some(position);
43 self
44 }
45
46 pub fn first(self) -> Self {
47 self.position_in_group(ToggleButtonPosition::First)
48 }
49
50 pub fn middle(self) -> Self {
51 self.position_in_group(ToggleButtonPosition::Middle)
52 }
53
54 pub fn last(self) -> Self {
55 self.position_in_group(ToggleButtonPosition::Last)
56 }
57}
58
59impl Toggleable for ToggleButton {
60 fn toggle_state(mut self, selected: bool) -> Self {
61 self.base = self.base.toggle_state(selected);
62 self
63 }
64}
65
66impl SelectableButton for ToggleButton {
67 fn selected_style(mut self, style: ButtonStyle) -> Self {
68 self.base.selected_style = Some(style);
69 self
70 }
71}
72
73impl FixedWidth for ToggleButton {
74 fn width(mut self, width: DefiniteLength) -> Self {
75 self.base.width = Some(width);
76 self
77 }
78
79 fn full_width(mut self) -> Self {
80 self.base.width = Some(relative(1.));
81 self
82 }
83}
84
85impl Disableable for ToggleButton {
86 fn disabled(mut self, disabled: bool) -> Self {
87 self.base = self.base.disabled(disabled);
88 self
89 }
90}
91
92impl Clickable for ToggleButton {
93 fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static) -> Self {
94 self.base = self.base.on_click(handler);
95 self
96 }
97
98 fn cursor_style(mut self, cursor_style: gpui::CursorStyle) -> Self {
99 self.base = self.base.cursor_style(cursor_style);
100 self
101 }
102}
103
104impl ButtonCommon for ToggleButton {
105 fn id(&self) -> &ElementId {
106 self.base.id()
107 }
108
109 fn style(mut self, style: ButtonStyle) -> Self {
110 self.base = self.base.style(style);
111 self
112 }
113
114 fn size(mut self, size: ButtonSize) -> Self {
115 self.base = self.base.size(size);
116 self
117 }
118
119 fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
120 self.base = self.base.tooltip(tooltip);
121 self
122 }
123
124 fn layer(mut self, elevation: ElevationIndex) -> Self {
125 self.base = self.base.layer(elevation);
126 self
127 }
128}
129
130impl RenderOnce for ToggleButton {
131 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
132 let is_disabled = self.base.disabled;
133 let is_selected = self.base.selected;
134
135 let label_color = if is_disabled {
136 Color::Disabled
137 } else if is_selected {
138 Color::Selected
139 } else {
140 self.label_color.unwrap_or_default()
141 };
142
143 self.base
144 .when_some(self.position_in_group, |this, position| match position {
145 ToggleButtonPosition::First => this.rounding(ButtonLikeRounding::Left),
146 ToggleButtonPosition::Middle => this.rounding(None),
147 ToggleButtonPosition::Last => this.rounding(ButtonLikeRounding::Right),
148 })
149 .child(
150 Label::new(self.label)
151 .color(label_color)
152 .line_height_style(LineHeightStyle::UiLabel),
153 )
154 }
155}
156
157impl Component for ToggleButton {
158 fn scope() -> ComponentScope {
159 ComponentScope::Input
160 }
161
162 fn sort_name() -> &'static str {
163 "ButtonC"
164 }
165
166 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
167 Some(
168 v_flex()
169 .gap_6()
170 .children(vec![
171 example_group_with_title(
172 "Button Styles",
173 vec![
174 single_example(
175 "Off",
176 ToggleButton::new("off", "Off")
177 .layer(ElevationIndex::Background)
178 .style(ButtonStyle::Filled)
179 .into_any_element(),
180 ),
181 single_example(
182 "On",
183 ToggleButton::new("on", "On")
184 .layer(ElevationIndex::Background)
185 .toggle_state(true)
186 .style(ButtonStyle::Filled)
187 .into_any_element(),
188 ),
189 single_example(
190 "Off – Disabled",
191 ToggleButton::new("disabled_off", "Disabled Off")
192 .layer(ElevationIndex::Background)
193 .disabled(true)
194 .style(ButtonStyle::Filled)
195 .into_any_element(),
196 ),
197 single_example(
198 "On – Disabled",
199 ToggleButton::new("disabled_on", "Disabled On")
200 .layer(ElevationIndex::Background)
201 .disabled(true)
202 .toggle_state(true)
203 .style(ButtonStyle::Filled)
204 .into_any_element(),
205 ),
206 ],
207 ),
208 example_group_with_title(
209 "Button Group",
210 vec![
211 single_example(
212 "Three Buttons",
213 h_flex()
214 .child(
215 ToggleButton::new("three_btn_first", "First")
216 .layer(ElevationIndex::Background)
217 .style(ButtonStyle::Filled)
218 .first()
219 .into_any_element(),
220 )
221 .child(
222 ToggleButton::new("three_btn_middle", "Middle")
223 .layer(ElevationIndex::Background)
224 .style(ButtonStyle::Filled)
225 .middle()
226 .toggle_state(true)
227 .into_any_element(),
228 )
229 .child(
230 ToggleButton::new("three_btn_last", "Last")
231 .layer(ElevationIndex::Background)
232 .style(ButtonStyle::Filled)
233 .last()
234 .into_any_element(),
235 )
236 .into_any_element(),
237 ),
238 single_example(
239 "Two Buttons",
240 h_flex()
241 .child(
242 ToggleButton::new("two_btn_first", "First")
243 .layer(ElevationIndex::Background)
244 .style(ButtonStyle::Filled)
245 .first()
246 .into_any_element(),
247 )
248 .child(
249 ToggleButton::new("two_btn_last", "Last")
250 .layer(ElevationIndex::Background)
251 .style(ButtonStyle::Filled)
252 .last()
253 .into_any_element(),
254 )
255 .into_any_element(),
256 ),
257 ],
258 ),
259 example_group_with_title(
260 "Alternate Sizes",
261 vec![
262 single_example(
263 "None",
264 ToggleButton::new("none", "None")
265 .layer(ElevationIndex::Background)
266 .style(ButtonStyle::Filled)
267 .size(ButtonSize::None)
268 .into_any_element(),
269 ),
270 single_example(
271 "Compact",
272 ToggleButton::new("compact", "Compact")
273 .layer(ElevationIndex::Background)
274 .style(ButtonStyle::Filled)
275 .size(ButtonSize::Compact)
276 .into_any_element(),
277 ),
278 single_example(
279 "Large",
280 ToggleButton::new("large", "Large")
281 .layer(ElevationIndex::Background)
282 .style(ButtonStyle::Filled)
283 .size(ButtonSize::Large)
284 .into_any_element(),
285 ),
286 ],
287 ),
288 ])
289 .into_any_element(),
290 )
291 }
292}
293
294pub struct ButtonConfiguration {
295 label: SharedString,
296 icon: Option<IconName>,
297 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
298 selected: bool,
299}
300
301mod private {
302 pub trait ToggleButtonStyle {}
303}
304
305pub trait ButtonBuilder: 'static + private::ToggleButtonStyle {
306 fn into_configuration(self) -> ButtonConfiguration;
307}
308
309pub struct ToggleButtonSimple {
310 label: SharedString,
311 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
312 selected: bool,
313}
314
315impl ToggleButtonSimple {
316 pub fn new(
317 label: impl Into<SharedString>,
318 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
319 ) -> Self {
320 Self {
321 label: label.into(),
322 on_click: Box::new(on_click),
323 selected: false,
324 }
325 }
326
327 pub fn selected(mut self, selected: bool) -> Self {
328 self.selected = selected;
329 self
330 }
331}
332
333impl private::ToggleButtonStyle for ToggleButtonSimple {}
334
335impl ButtonBuilder for ToggleButtonSimple {
336 fn into_configuration(self) -> ButtonConfiguration {
337 ButtonConfiguration {
338 label: self.label,
339 icon: None,
340 on_click: self.on_click,
341 selected: self.selected,
342 }
343 }
344}
345
346pub struct ToggleButtonWithIcon {
347 label: SharedString,
348 icon: IconName,
349 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
350 selected: bool,
351}
352
353impl ToggleButtonWithIcon {
354 pub fn new(
355 label: impl Into<SharedString>,
356 icon: IconName,
357 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
358 ) -> Self {
359 Self {
360 label: label.into(),
361 icon,
362 on_click: Box::new(on_click),
363 selected: false,
364 }
365 }
366
367 pub fn selected(mut self, selected: bool) -> Self {
368 self.selected = selected;
369 self
370 }
371}
372
373impl private::ToggleButtonStyle for ToggleButtonWithIcon {}
374
375impl ButtonBuilder for ToggleButtonWithIcon {
376 fn into_configuration(self) -> ButtonConfiguration {
377 ButtonConfiguration {
378 label: self.label,
379 icon: Some(self.icon),
380 on_click: self.on_click,
381 selected: self.selected,
382 }
383 }
384}
385
386#[derive(Clone, Copy, PartialEq)]
387pub enum ToggleButtonGroupStyle {
388 Transparent,
389 Filled,
390 Outlined,
391}
392
393#[derive(Clone, Copy, PartialEq)]
394pub enum ToggleButtonGroupSize {
395 Default,
396 Medium,
397}
398
399#[derive(IntoElement)]
400pub struct ToggleButtonGroup<T, const COLS: usize = 3, const ROWS: usize = 1>
401where
402 T: ButtonBuilder,
403{
404 group_name: &'static str,
405 rows: [[T; COLS]; ROWS],
406 style: ToggleButtonGroupStyle,
407 size: ToggleButtonGroupSize,
408 button_width: Rems,
409 selected_index: usize,
410}
411
412impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS> {
413 pub fn single_row(group_name: &'static str, buttons: [T; COLS]) -> Self {
414 Self {
415 group_name,
416 rows: [buttons],
417 style: ToggleButtonGroupStyle::Transparent,
418 size: ToggleButtonGroupSize::Default,
419 button_width: rems_from_px(100.),
420 selected_index: 0,
421 }
422 }
423}
424
425impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS, 2> {
426 pub fn two_rows(group_name: &'static str, first_row: [T; COLS], second_row: [T; COLS]) -> Self {
427 Self {
428 group_name,
429 rows: [first_row, second_row],
430 style: ToggleButtonGroupStyle::Transparent,
431 size: ToggleButtonGroupSize::Default,
432 button_width: rems_from_px(100.),
433 selected_index: 0,
434 }
435 }
436}
437
438impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> ToggleButtonGroup<T, COLS, ROWS> {
439 pub fn style(mut self, style: ToggleButtonGroupStyle) -> Self {
440 self.style = style;
441 self
442 }
443
444 pub fn size(mut self, size: ToggleButtonGroupSize) -> Self {
445 self.size = size;
446 self
447 }
448
449 pub fn button_width(mut self, button_width: Rems) -> Self {
450 self.button_width = button_width;
451 self
452 }
453
454 pub fn selected_index(mut self, index: usize) -> Self {
455 self.selected_index = index;
456 self
457 }
458}
459
460impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> RenderOnce
461 for ToggleButtonGroup<T, COLS, ROWS>
462{
463 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
464 let entries =
465 self.rows.into_iter().enumerate().map(|(row_index, row)| {
466 row.into_iter().enumerate().map(move |(col_index, button)| {
467 let ButtonConfiguration {
468 label,
469 icon,
470 on_click,
471 selected,
472 } = button.into_configuration();
473
474 let entry_index = row_index * COLS + col_index;
475
476 ButtonLike::new((self.group_name, entry_index))
477 .when(entry_index == self.selected_index || selected, |this| {
478 this.toggle_state(true)
479 .selected_style(ButtonStyle::Tinted(TintColor::Accent))
480 })
481 .rounding(None)
482 .when(self.style == ToggleButtonGroupStyle::Filled, |button| {
483 button.style(ButtonStyle::Filled)
484 })
485 .when(self.size == ToggleButtonGroupSize::Medium, |button| {
486 button.size(ButtonSize::Medium)
487 })
488 .child(
489 h_flex()
490 .min_w(self.button_width)
491 .gap_1p5()
492 .px_3()
493 .py_1()
494 .justify_center()
495 .when_some(icon, |this, icon| {
496 this.py_2()
497 .child(Icon::new(icon).size(IconSize::XSmall).map(|this| {
498 if entry_index == self.selected_index || selected {
499 this.color(Color::Accent)
500 } else {
501 this.color(Color::Muted)
502 }
503 }))
504 })
505 .child(Label::new(label).size(LabelSize::Small).when(
506 entry_index == self.selected_index || selected,
507 |this| this.color(Color::Accent),
508 )),
509 )
510 .on_click(on_click)
511 .into_any_element()
512 })
513 });
514
515 let border_color = cx.theme().colors().border.opacity(0.6);
516 let is_outlined_or_filled = self.style == ToggleButtonGroupStyle::Outlined
517 || self.style == ToggleButtonGroupStyle::Filled;
518 let is_transparent = self.style == ToggleButtonGroupStyle::Transparent;
519
520 v_flex()
521 .rounded_md()
522 .overflow_hidden()
523 .map(|this| {
524 if is_transparent {
525 this.gap_px()
526 } else {
527 this.border_1().border_color(border_color)
528 }
529 })
530 .children(entries.enumerate().map(|(row_index, row)| {
531 let last_row = row_index == ROWS - 1;
532 h_flex()
533 .when(!is_outlined_or_filled, |this| this.gap_px())
534 .when(is_outlined_or_filled && !last_row, |this| {
535 this.border_b_1().border_color(border_color)
536 })
537 .children(row.enumerate().map(|(item_index, item)| {
538 let last_item = item_index == COLS - 1;
539 div()
540 .when(is_outlined_or_filled && !last_item, |this| {
541 this.border_r_1().border_color(border_color)
542 })
543 .child(item)
544 }))
545 }))
546 }
547}
548
549fn register_toggle_button_group() {
550 component::register_component::<ToggleButtonGroup<ToggleButtonSimple>>();
551}
552
553component::__private::inventory::submit! {
554 component::ComponentFn::new(register_toggle_button_group)
555}
556
557impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> Component
558 for ToggleButtonGroup<T, COLS, ROWS>
559{
560 fn name() -> &'static str {
561 "ToggleButtonGroup"
562 }
563
564 fn scope() -> ComponentScope {
565 ComponentScope::Input
566 }
567
568 fn sort_name() -> &'static str {
569 "ButtonG"
570 }
571
572 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
573 Some(
574 v_flex()
575 .gap_6()
576 .children(vec![example_group_with_title(
577 "Transparent Variant",
578 vec![
579 single_example(
580 "Single Row Group",
581 ToggleButtonGroup::single_row(
582 "single_row_test",
583 [
584 ToggleButtonSimple::new("First", |_, _, _| {}),
585 ToggleButtonSimple::new("Second", |_, _, _| {}),
586 ToggleButtonSimple::new("Third", |_, _, _| {}),
587 ],
588 )
589 .selected_index(1)
590 .button_width(rems_from_px(100.))
591 .into_any_element(),
592 ),
593 single_example(
594 "Single Row Group with icons",
595 ToggleButtonGroup::single_row(
596 "single_row_test_icon",
597 [
598 ToggleButtonWithIcon::new(
599 "First",
600 IconName::AiZed,
601 |_, _, _| {},
602 ),
603 ToggleButtonWithIcon::new(
604 "Second",
605 IconName::AiZed,
606 |_, _, _| {},
607 ),
608 ToggleButtonWithIcon::new(
609 "Third",
610 IconName::AiZed,
611 |_, _, _| {},
612 ),
613 ],
614 )
615 .selected_index(1)
616 .button_width(rems_from_px(100.))
617 .into_any_element(),
618 ),
619 single_example(
620 "Multiple Row Group",
621 ToggleButtonGroup::two_rows(
622 "multiple_row_test",
623 [
624 ToggleButtonSimple::new("First", |_, _, _| {}),
625 ToggleButtonSimple::new("Second", |_, _, _| {}),
626 ToggleButtonSimple::new("Third", |_, _, _| {}),
627 ],
628 [
629 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
630 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
631 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
632 ],
633 )
634 .selected_index(3)
635 .button_width(rems_from_px(100.))
636 .into_any_element(),
637 ),
638 single_example(
639 "Multiple Row Group with Icons",
640 ToggleButtonGroup::two_rows(
641 "multiple_row_test_icons",
642 [
643 ToggleButtonWithIcon::new(
644 "First",
645 IconName::AiZed,
646 |_, _, _| {},
647 ),
648 ToggleButtonWithIcon::new(
649 "Second",
650 IconName::AiZed,
651 |_, _, _| {},
652 ),
653 ToggleButtonWithIcon::new(
654 "Third",
655 IconName::AiZed,
656 |_, _, _| {},
657 ),
658 ],
659 [
660 ToggleButtonWithIcon::new(
661 "Fourth",
662 IconName::AiZed,
663 |_, _, _| {},
664 ),
665 ToggleButtonWithIcon::new(
666 "Fifth",
667 IconName::AiZed,
668 |_, _, _| {},
669 ),
670 ToggleButtonWithIcon::new(
671 "Sixth",
672 IconName::AiZed,
673 |_, _, _| {},
674 ),
675 ],
676 )
677 .selected_index(3)
678 .button_width(rems_from_px(100.))
679 .into_any_element(),
680 ),
681 ],
682 )])
683 .children(vec![example_group_with_title(
684 "Outlined Variant",
685 vec![
686 single_example(
687 "Single Row Group",
688 ToggleButtonGroup::single_row(
689 "single_row_test_outline",
690 [
691 ToggleButtonSimple::new("First", |_, _, _| {}),
692 ToggleButtonSimple::new("Second", |_, _, _| {}),
693 ToggleButtonSimple::new("Third", |_, _, _| {}),
694 ],
695 )
696 .selected_index(1)
697 .style(ToggleButtonGroupStyle::Outlined)
698 .into_any_element(),
699 ),
700 single_example(
701 "Single Row Group with icons",
702 ToggleButtonGroup::single_row(
703 "single_row_test_icon_outlined",
704 [
705 ToggleButtonWithIcon::new(
706 "First",
707 IconName::AiZed,
708 |_, _, _| {},
709 ),
710 ToggleButtonWithIcon::new(
711 "Second",
712 IconName::AiZed,
713 |_, _, _| {},
714 ),
715 ToggleButtonWithIcon::new(
716 "Third",
717 IconName::AiZed,
718 |_, _, _| {},
719 ),
720 ],
721 )
722 .selected_index(1)
723 .button_width(rems_from_px(100.))
724 .style(ToggleButtonGroupStyle::Outlined)
725 .into_any_element(),
726 ),
727 single_example(
728 "Multiple Row Group",
729 ToggleButtonGroup::two_rows(
730 "multiple_row_test",
731 [
732 ToggleButtonSimple::new("First", |_, _, _| {}),
733 ToggleButtonSimple::new("Second", |_, _, _| {}),
734 ToggleButtonSimple::new("Third", |_, _, _| {}),
735 ],
736 [
737 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
738 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
739 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
740 ],
741 )
742 .selected_index(3)
743 .button_width(rems_from_px(100.))
744 .style(ToggleButtonGroupStyle::Outlined)
745 .into_any_element(),
746 ),
747 single_example(
748 "Multiple Row Group with Icons",
749 ToggleButtonGroup::two_rows(
750 "multiple_row_test",
751 [
752 ToggleButtonWithIcon::new(
753 "First",
754 IconName::AiZed,
755 |_, _, _| {},
756 ),
757 ToggleButtonWithIcon::new(
758 "Second",
759 IconName::AiZed,
760 |_, _, _| {},
761 ),
762 ToggleButtonWithIcon::new(
763 "Third",
764 IconName::AiZed,
765 |_, _, _| {},
766 ),
767 ],
768 [
769 ToggleButtonWithIcon::new(
770 "Fourth",
771 IconName::AiZed,
772 |_, _, _| {},
773 ),
774 ToggleButtonWithIcon::new(
775 "Fifth",
776 IconName::AiZed,
777 |_, _, _| {},
778 ),
779 ToggleButtonWithIcon::new(
780 "Sixth",
781 IconName::AiZed,
782 |_, _, _| {},
783 ),
784 ],
785 )
786 .selected_index(3)
787 .button_width(rems_from_px(100.))
788 .style(ToggleButtonGroupStyle::Outlined)
789 .into_any_element(),
790 ),
791 ],
792 )])
793 .children(vec![example_group_with_title(
794 "Filled Variant",
795 vec![
796 single_example(
797 "Single Row Group",
798 ToggleButtonGroup::single_row(
799 "single_row_test_outline",
800 [
801 ToggleButtonSimple::new("First", |_, _, _| {}),
802 ToggleButtonSimple::new("Second", |_, _, _| {}),
803 ToggleButtonSimple::new("Third", |_, _, _| {}),
804 ],
805 )
806 .selected_index(2)
807 .style(ToggleButtonGroupStyle::Filled)
808 .into_any_element(),
809 ),
810 single_example(
811 "Single Row Group with icons",
812 ToggleButtonGroup::single_row(
813 "single_row_test_icon_outlined",
814 [
815 ToggleButtonWithIcon::new(
816 "First",
817 IconName::AiZed,
818 |_, _, _| {},
819 ),
820 ToggleButtonWithIcon::new(
821 "Second",
822 IconName::AiZed,
823 |_, _, _| {},
824 ),
825 ToggleButtonWithIcon::new(
826 "Third",
827 IconName::AiZed,
828 |_, _, _| {},
829 ),
830 ],
831 )
832 .selected_index(1)
833 .button_width(rems_from_px(100.))
834 .style(ToggleButtonGroupStyle::Filled)
835 .into_any_element(),
836 ),
837 single_example(
838 "Multiple Row Group",
839 ToggleButtonGroup::two_rows(
840 "multiple_row_test",
841 [
842 ToggleButtonSimple::new("First", |_, _, _| {}),
843 ToggleButtonSimple::new("Second", |_, _, _| {}),
844 ToggleButtonSimple::new("Third", |_, _, _| {}),
845 ],
846 [
847 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
848 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
849 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
850 ],
851 )
852 .selected_index(3)
853 .button_width(rems_from_px(100.))
854 .style(ToggleButtonGroupStyle::Filled)
855 .into_any_element(),
856 ),
857 single_example(
858 "Multiple Row Group with Icons",
859 ToggleButtonGroup::two_rows(
860 "multiple_row_test",
861 [
862 ToggleButtonWithIcon::new(
863 "First",
864 IconName::AiZed,
865 |_, _, _| {},
866 ),
867 ToggleButtonWithIcon::new(
868 "Second",
869 IconName::AiZed,
870 |_, _, _| {},
871 ),
872 ToggleButtonWithIcon::new(
873 "Third",
874 IconName::AiZed,
875 |_, _, _| {},
876 ),
877 ],
878 [
879 ToggleButtonWithIcon::new(
880 "Fourth",
881 IconName::AiZed,
882 |_, _, _| {},
883 ),
884 ToggleButtonWithIcon::new(
885 "Fifth",
886 IconName::AiZed,
887 |_, _, _| {},
888 ),
889 ToggleButtonWithIcon::new(
890 "Sixth",
891 IconName::AiZed,
892 |_, _, _| {},
893 ),
894 ],
895 )
896 .selected_index(3)
897 .button_width(rems_from_px(100.))
898 .style(ToggleButtonGroupStyle::Filled)
899 .into_any_element(),
900 ),
901 ],
902 )])
903 .into_any_element(),
904 )
905 }
906}