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