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
294mod private {
295 pub trait Sealed {}
296}
297
298pub trait ButtonBuilder: 'static + private::Sealed {
299 fn label(&self) -> impl Into<SharedString>;
300 fn icon(&self) -> Option<IconName>;
301 fn on_click(self) -> Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>;
302}
303
304pub struct ToggleButtonSimple {
305 label: SharedString,
306 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
307}
308
309impl ToggleButtonSimple {
310 pub fn new(
311 label: impl Into<SharedString>,
312 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
313 ) -> Self {
314 Self {
315 label: label.into(),
316 on_click: Box::new(on_click),
317 }
318 }
319}
320
321impl private::Sealed for ToggleButtonSimple {}
322
323impl ButtonBuilder for ToggleButtonSimple {
324 fn label(&self) -> impl Into<SharedString> {
325 self.label.clone()
326 }
327
328 fn icon(&self) -> Option<IconName> {
329 None
330 }
331
332 fn on_click(self) -> Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static> {
333 self.on_click
334 }
335}
336
337pub struct ToggleButtonWithIcon {
338 label: SharedString,
339 icon: IconName,
340 on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
341}
342
343impl ToggleButtonWithIcon {
344 pub fn new(
345 label: impl Into<SharedString>,
346 icon: IconName,
347 on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
348 ) -> Self {
349 Self {
350 label: label.into(),
351 icon,
352 on_click: Box::new(on_click),
353 }
354 }
355}
356
357impl private::Sealed for ToggleButtonWithIcon {}
358
359impl ButtonBuilder for ToggleButtonWithIcon {
360 fn label(&self) -> impl Into<SharedString> {
361 self.label.clone()
362 }
363
364 fn icon(&self) -> Option<IconName> {
365 Some(self.icon)
366 }
367
368 fn on_click(self) -> Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static> {
369 self.on_click
370 }
371}
372
373struct ToggleButtonRow<T: ButtonBuilder> {
374 items: Vec<T>,
375 index_offset: usize,
376 last_item_idx: usize,
377 is_last_row: bool,
378}
379
380impl<T: ButtonBuilder> ToggleButtonRow<T> {
381 fn new(items: Vec<T>, index_offset: usize, is_last_row: bool) -> Self {
382 Self {
383 index_offset,
384 last_item_idx: index_offset + items.len() - 1,
385 is_last_row,
386 items,
387 }
388 }
389}
390
391enum ToggleButtonGroupRows<T: ButtonBuilder> {
392 Single(Vec<T>),
393 Multiple(Vec<T>, Vec<T>),
394}
395
396impl<T: ButtonBuilder> ToggleButtonGroupRows<T> {
397 fn items(self) -> impl IntoIterator<Item = ToggleButtonRow<T>> {
398 match self {
399 ToggleButtonGroupRows::Single(items) => {
400 vec![ToggleButtonRow::new(items, 0, true)]
401 }
402 ToggleButtonGroupRows::Multiple(first_row, second_row) => {
403 let row_len = first_row.len();
404 vec![
405 ToggleButtonRow::new(first_row, 0, false),
406 ToggleButtonRow::new(second_row, row_len, true),
407 ]
408 }
409 }
410 }
411}
412
413#[derive(Clone, Copy, PartialEq)]
414pub enum ToggleButtonGroupStyle {
415 Transparent,
416 Filled,
417 Outlined,
418}
419
420#[derive(IntoElement)]
421pub struct ToggleButtonGroup<T>
422where
423 T: ButtonBuilder,
424{
425 group_name: SharedString,
426 rows: ToggleButtonGroupRows<T>,
427 style: ToggleButtonGroupStyle,
428 button_width: Rems,
429 selected_index: usize,
430}
431
432impl<T: ButtonBuilder> ToggleButtonGroup<T> {
433 pub fn single_row(
434 group_name: impl Into<SharedString>,
435 buttons: impl IntoIterator<Item = T>,
436 ) -> Self {
437 Self {
438 group_name: group_name.into(),
439 rows: ToggleButtonGroupRows::Single(Vec::from_iter(buttons)),
440 style: ToggleButtonGroupStyle::Transparent,
441 button_width: rems_from_px(100.),
442 selected_index: 0,
443 }
444 }
445
446 pub fn multiple_rows<const ROWS: usize>(
447 group_name: impl Into<SharedString>,
448 first_row: [T; ROWS],
449 second_row: [T; ROWS],
450 ) -> Self {
451 Self {
452 group_name: group_name.into(),
453 rows: ToggleButtonGroupRows::Multiple(
454 Vec::from_iter(first_row),
455 Vec::from_iter(second_row),
456 ),
457 style: ToggleButtonGroupStyle::Transparent,
458 button_width: rems_from_px(100.),
459 selected_index: 0,
460 }
461 }
462
463 pub fn style(mut self, style: ToggleButtonGroupStyle) -> Self {
464 self.style = style;
465 self
466 }
467
468 pub fn button_width(mut self, button_width: Rems) -> Self {
469 self.button_width = button_width;
470 self
471 }
472
473 pub fn selected_index(mut self, index: usize) -> Self {
474 self.selected_index = index;
475 self
476 }
477}
478
479impl<T: ButtonBuilder> RenderOnce for ToggleButtonGroup<T> {
480 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
481 let rows = self.rows.items().into_iter().map(|row| {
482 (
483 row.items
484 .into_iter()
485 .enumerate()
486 .map(move |(index, item)| (index + row.index_offset, row.last_item_idx, item))
487 .map(|(index, last_item_idx, item)| {
488 (
489 ButtonLike::new((self.group_name.clone(), index))
490 .when(index == self.selected_index, |this| {
491 this.toggle_state(true)
492 .selected_style(ButtonStyle::Tinted(TintColor::Accent))
493 })
494 .rounding(None)
495 .when(self.style == ToggleButtonGroupStyle::Filled, |button| {
496 button.style(ButtonStyle::Filled)
497 })
498 .child(
499 h_flex()
500 .min_w(self.button_width)
501 .gap_1p5()
502 .justify_center()
503 .when_some(item.icon(), |this, icon| {
504 this.child(Icon::new(icon).size(IconSize::XSmall).map(
505 |this| {
506 if index == self.selected_index {
507 this.color(Color::Accent)
508 } else {
509 this.color(Color::Muted)
510 }
511 },
512 ))
513 })
514 .child(
515 Label::new(item.label())
516 .when(index == self.selected_index, |this| {
517 this.color(Color::Accent)
518 }),
519 ),
520 )
521 .on_click(item.on_click()),
522 index == last_item_idx,
523 )
524 }),
525 row.is_last_row,
526 )
527 });
528
529 let is_outlined_or_filled = self.style == ToggleButtonGroupStyle::Outlined
530 || self.style == ToggleButtonGroupStyle::Filled;
531 let is_transparent = self.style == ToggleButtonGroupStyle::Transparent;
532 let border_color = cx.theme().colors().border.opacity(0.6);
533
534 v_flex()
535 .rounded_md()
536 .overflow_hidden()
537 .map(|this| {
538 if is_transparent {
539 this.gap_px()
540 } else {
541 this.border_1().border_color(border_color)
542 }
543 })
544 .children(rows.map(|(items, last_row)| {
545 h_flex()
546 .when(!is_outlined_or_filled, |this| this.gap_px())
547 .when(is_outlined_or_filled && !last_row, |this| {
548 this.border_b_1().border_color(border_color)
549 })
550 .children(items.map(|(item, last_item)| {
551 div()
552 .when(is_outlined_or_filled && !last_item, |this| {
553 this.border_r_1().border_color(border_color)
554 })
555 .child(item)
556 }))
557 }))
558 }
559}
560
561fn register_toggle_button_group() {
562 component::register_component::<ToggleButtonGroup<ToggleButtonSimple>>();
563}
564
565component::__private::inventory::submit! {
566 component::ComponentFn::new(register_toggle_button_group)
567}
568
569impl<T: ButtonBuilder> Component for ToggleButtonGroup<T> {
570 fn name() -> &'static str {
571 "ToggleButtonGroup"
572 }
573
574 fn scope() -> ComponentScope {
575 ComponentScope::Input
576 }
577
578 fn sort_name() -> &'static str {
579 "ButtonG"
580 }
581
582 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
583 Some(
584 v_flex()
585 .gap_6()
586 .children(vec![example_group_with_title(
587 "Transparent Variant",
588 vec![
589 single_example(
590 "Single Row Group",
591 ToggleButtonGroup::single_row(
592 "single_row_test",
593 [
594 ToggleButtonSimple::new("First", |_, _, _| {}),
595 ToggleButtonSimple::new("Second", |_, _, _| {}),
596 ToggleButtonSimple::new("Third", |_, _, _| {}),
597 ],
598 )
599 .selected_index(1)
600 .button_width(rems_from_px(100.))
601 .into_any_element(),
602 ),
603 single_example(
604 "Single Row Group with icons",
605 ToggleButtonGroup::single_row(
606 "single_row_test_icon",
607 [
608 ToggleButtonWithIcon::new(
609 "First",
610 IconName::AiZed,
611 |_, _, _| {},
612 ),
613 ToggleButtonWithIcon::new(
614 "Second",
615 IconName::AiZed,
616 |_, _, _| {},
617 ),
618 ToggleButtonWithIcon::new(
619 "Third",
620 IconName::AiZed,
621 |_, _, _| {},
622 ),
623 ],
624 )
625 .selected_index(1)
626 .button_width(rems_from_px(100.))
627 .into_any_element(),
628 ),
629 single_example(
630 "Multiple Row Group",
631 ToggleButtonGroup::multiple_rows(
632 "multiple_row_test",
633 [
634 ToggleButtonSimple::new("First", |_, _, _| {}),
635 ToggleButtonSimple::new("Second", |_, _, _| {}),
636 ToggleButtonSimple::new("Third", |_, _, _| {}),
637 ],
638 [
639 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
640 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
641 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
642 ],
643 )
644 .selected_index(3)
645 .button_width(rems_from_px(100.))
646 .into_any_element(),
647 ),
648 single_example(
649 "Multiple Row Group with Icons",
650 ToggleButtonGroup::multiple_rows(
651 "multiple_row_test_icons",
652 [
653 ToggleButtonWithIcon::new(
654 "First",
655 IconName::AiZed,
656 |_, _, _| {},
657 ),
658 ToggleButtonWithIcon::new(
659 "Second",
660 IconName::AiZed,
661 |_, _, _| {},
662 ),
663 ToggleButtonWithIcon::new(
664 "Third",
665 IconName::AiZed,
666 |_, _, _| {},
667 ),
668 ],
669 [
670 ToggleButtonWithIcon::new(
671 "Fourth",
672 IconName::AiZed,
673 |_, _, _| {},
674 ),
675 ToggleButtonWithIcon::new(
676 "Fifth",
677 IconName::AiZed,
678 |_, _, _| {},
679 ),
680 ToggleButtonWithIcon::new(
681 "Sixth",
682 IconName::AiZed,
683 |_, _, _| {},
684 ),
685 ],
686 )
687 .selected_index(3)
688 .button_width(rems_from_px(100.))
689 .into_any_element(),
690 ),
691 ],
692 )])
693 .children(vec![example_group_with_title(
694 "Outlined Variant",
695 vec![
696 single_example(
697 "Single Row Group",
698 ToggleButtonGroup::single_row(
699 "single_row_test_outline",
700 [
701 ToggleButtonSimple::new("First", |_, _, _| {}),
702 ToggleButtonSimple::new("Second", |_, _, _| {}),
703 ToggleButtonSimple::new("Third", |_, _, _| {}),
704 ],
705 )
706 .selected_index(1)
707 .style(ToggleButtonGroupStyle::Outlined)
708 .into_any_element(),
709 ),
710 single_example(
711 "Single Row Group with icons",
712 ToggleButtonGroup::single_row(
713 "single_row_test_icon_outlined",
714 [
715 ToggleButtonWithIcon::new(
716 "First",
717 IconName::AiZed,
718 |_, _, _| {},
719 ),
720 ToggleButtonWithIcon::new(
721 "Second",
722 IconName::AiZed,
723 |_, _, _| {},
724 ),
725 ToggleButtonWithIcon::new(
726 "Third",
727 IconName::AiZed,
728 |_, _, _| {},
729 ),
730 ],
731 )
732 .selected_index(1)
733 .button_width(rems_from_px(100.))
734 .style(ToggleButtonGroupStyle::Outlined)
735 .into_any_element(),
736 ),
737 single_example(
738 "Multiple Row Group",
739 ToggleButtonGroup::multiple_rows(
740 "multiple_row_test",
741 [
742 ToggleButtonSimple::new("First", |_, _, _| {}),
743 ToggleButtonSimple::new("Second", |_, _, _| {}),
744 ToggleButtonSimple::new("Third", |_, _, _| {}),
745 ],
746 [
747 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
748 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
749 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
750 ],
751 )
752 .selected_index(3)
753 .button_width(rems_from_px(100.))
754 .style(ToggleButtonGroupStyle::Outlined)
755 .into_any_element(),
756 ),
757 single_example(
758 "Multiple Row Group with Icons",
759 ToggleButtonGroup::multiple_rows(
760 "multiple_row_test",
761 [
762 ToggleButtonWithIcon::new(
763 "First",
764 IconName::AiZed,
765 |_, _, _| {},
766 ),
767 ToggleButtonWithIcon::new(
768 "Second",
769 IconName::AiZed,
770 |_, _, _| {},
771 ),
772 ToggleButtonWithIcon::new(
773 "Third",
774 IconName::AiZed,
775 |_, _, _| {},
776 ),
777 ],
778 [
779 ToggleButtonWithIcon::new(
780 "Fourth",
781 IconName::AiZed,
782 |_, _, _| {},
783 ),
784 ToggleButtonWithIcon::new(
785 "Fifth",
786 IconName::AiZed,
787 |_, _, _| {},
788 ),
789 ToggleButtonWithIcon::new(
790 "Sixth",
791 IconName::AiZed,
792 |_, _, _| {},
793 ),
794 ],
795 )
796 .selected_index(3)
797 .button_width(rems_from_px(100.))
798 .style(ToggleButtonGroupStyle::Outlined)
799 .into_any_element(),
800 ),
801 ],
802 )])
803 .children(vec![example_group_with_title(
804 "Filled Variant",
805 vec![
806 single_example(
807 "Single Row Group",
808 ToggleButtonGroup::single_row(
809 "single_row_test_outline",
810 [
811 ToggleButtonSimple::new("First", |_, _, _| {}),
812 ToggleButtonSimple::new("Second", |_, _, _| {}),
813 ToggleButtonSimple::new("Third", |_, _, _| {}),
814 ],
815 )
816 .selected_index(2)
817 .style(ToggleButtonGroupStyle::Filled)
818 .into_any_element(),
819 ),
820 single_example(
821 "Single Row Group with icons",
822 ToggleButtonGroup::single_row(
823 "single_row_test_icon_outlined",
824 [
825 ToggleButtonWithIcon::new(
826 "First",
827 IconName::AiZed,
828 |_, _, _| {},
829 ),
830 ToggleButtonWithIcon::new(
831 "Second",
832 IconName::AiZed,
833 |_, _, _| {},
834 ),
835 ToggleButtonWithIcon::new(
836 "Third",
837 IconName::AiZed,
838 |_, _, _| {},
839 ),
840 ],
841 )
842 .selected_index(1)
843 .button_width(rems_from_px(100.))
844 .style(ToggleButtonGroupStyle::Filled)
845 .into_any_element(),
846 ),
847 single_example(
848 "Multiple Row Group",
849 ToggleButtonGroup::multiple_rows(
850 "multiple_row_test",
851 [
852 ToggleButtonSimple::new("First", |_, _, _| {}),
853 ToggleButtonSimple::new("Second", |_, _, _| {}),
854 ToggleButtonSimple::new("Third", |_, _, _| {}),
855 ],
856 [
857 ToggleButtonSimple::new("Fourth", |_, _, _| {}),
858 ToggleButtonSimple::new("Fifth", |_, _, _| {}),
859 ToggleButtonSimple::new("Sixth", |_, _, _| {}),
860 ],
861 )
862 .selected_index(3)
863 .button_width(rems_from_px(100.))
864 .style(ToggleButtonGroupStyle::Filled)
865 .into_any_element(),
866 ),
867 single_example(
868 "Multiple Row Group with Icons",
869 ToggleButtonGroup::multiple_rows(
870 "multiple_row_test",
871 [
872 ToggleButtonWithIcon::new(
873 "First",
874 IconName::AiZed,
875 |_, _, _| {},
876 ),
877 ToggleButtonWithIcon::new(
878 "Second",
879 IconName::AiZed,
880 |_, _, _| {},
881 ),
882 ToggleButtonWithIcon::new(
883 "Third",
884 IconName::AiZed,
885 |_, _, _| {},
886 ),
887 ],
888 [
889 ToggleButtonWithIcon::new(
890 "Fourth",
891 IconName::AiZed,
892 |_, _, _| {},
893 ),
894 ToggleButtonWithIcon::new(
895 "Fifth",
896 IconName::AiZed,
897 |_, _, _| {},
898 ),
899 ToggleButtonWithIcon::new(
900 "Sixth",
901 IconName::AiZed,
902 |_, _, _| {},
903 ),
904 ],
905 )
906 .selected_index(3)
907 .button_width(rems_from_px(100.))
908 .style(ToggleButtonGroupStyle::Filled)
909 .into_any_element(),
910 ),
911 ],
912 )])
913 .into_any_element(),
914 )
915 }
916}