1use gpui::{
2 AnyElement, AnyView, ClickEvent, ElementId, Hsla, IntoElement, KeybindingKeystroke, Keystroke,
3 Styled, Window, div, hsla, prelude::*,
4};
5use std::{rc::Rc, sync::Arc};
6
7use crate::utils::is_light;
8use crate::{Color, Icon, IconName, ToggleState, Tooltip};
9use crate::{ElevationIndex, KeyBinding, prelude::*};
10
11// TODO: Checkbox, CheckboxWithLabel, and Switch could all be
12// restructured to use a ToggleLike, similar to Button/Buttonlike, Label/Labellike
13
14/// Creates a new checkbox.
15pub fn checkbox(id: impl Into<ElementId>, toggle_state: ToggleState) -> Checkbox {
16 Checkbox::new(id, toggle_state)
17}
18
19/// Creates a new switch.
20pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
21 Switch::new(id, toggle_state)
22}
23
24/// The visual style of a toggle.
25#[derive(Debug, Default, Clone, PartialEq, Eq)]
26pub enum ToggleStyle {
27 /// Toggle has a transparent background
28 #[default]
29 Ghost,
30 /// Toggle has a filled background based on the
31 /// elevation index of the parent container
32 ElevationBased(ElevationIndex),
33 /// A custom style using a color to tint the toggle
34 Custom(Hsla),
35}
36
37/// # Checkbox
38///
39/// Checkboxes are used for multiple choices, not for mutually exclusive choices.
40/// Each checkbox works independently from other checkboxes in the list,
41/// therefore checking an additional box does not affect any other selections.
42#[derive(IntoElement, RegisterComponent)]
43pub struct Checkbox {
44 id: ElementId,
45 toggle_state: ToggleState,
46 style: ToggleStyle,
47 disabled: bool,
48 placeholder: bool,
49 filled: bool,
50 visualization: bool,
51 label: Option<SharedString>,
52 label_size: LabelSize,
53 label_color: Color,
54 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
55 on_click: Option<Box<dyn Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static>>,
56}
57
58impl Checkbox {
59 /// Creates a new [`Checkbox`].
60 pub fn new(id: impl Into<ElementId>, checked: ToggleState) -> Self {
61 Self {
62 id: id.into(),
63 toggle_state: checked,
64 style: ToggleStyle::default(),
65 disabled: false,
66 placeholder: false,
67 filled: false,
68 visualization: false,
69 label: None,
70 label_size: LabelSize::Default,
71 label_color: Color::Muted,
72 tooltip: None,
73 on_click: None,
74 }
75 }
76
77 /// Sets the disabled state of the [`Checkbox`].
78 pub fn disabled(mut self, disabled: bool) -> Self {
79 self.disabled = disabled;
80 self
81 }
82
83 /// Sets the disabled state of the [`Checkbox`].
84 pub fn placeholder(mut self, placeholder: bool) -> Self {
85 self.placeholder = placeholder;
86 self
87 }
88
89 /// Binds a handler to the [`Checkbox`] that will be called when clicked.
90 pub fn on_click(
91 mut self,
92 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
93 ) -> Self {
94 self.on_click = Some(Box::new(move |state, _, window, cx| {
95 handler(state, window, cx)
96 }));
97 self
98 }
99
100 pub fn on_click_ext(
101 mut self,
102 handler: impl Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static,
103 ) -> Self {
104 self.on_click = Some(Box::new(handler));
105 self
106 }
107
108 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
109 pub fn fill(mut self) -> Self {
110 self.filled = true;
111 self
112 }
113
114 /// Makes the checkbox look enabled but without pointer cursor and hover styles.
115 /// Primarily used for uninteractive markdown previews.
116 pub fn visualization_only(mut self, visualization: bool) -> Self {
117 self.visualization = visualization;
118 self
119 }
120
121 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
122 pub fn style(mut self, style: ToggleStyle) -> Self {
123 self.style = style;
124 self
125 }
126
127 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
128 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
129 self.style = ToggleStyle::ElevationBased(elevation);
130 self
131 }
132
133 /// Sets the tooltip for the checkbox.
134 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
135 self.tooltip = Some(Box::new(tooltip));
136 self
137 }
138
139 /// Set the label for the checkbox.
140 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
141 self.label = Some(label.into());
142 self
143 }
144
145 pub fn label_size(mut self, size: LabelSize) -> Self {
146 self.label_size = size;
147 self
148 }
149
150 pub fn label_color(mut self, color: Color) -> Self {
151 self.label_color = color;
152 self
153 }
154}
155
156impl Checkbox {
157 fn bg_color(&self, cx: &App) -> Hsla {
158 let style = self.style.clone();
159 match (style, self.filled) {
160 (ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background,
161 (ToggleStyle::Ghost, true) => cx.theme().colors().element_background,
162 (ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(),
163 (ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx),
164 (ToggleStyle::Custom(_), false) => gpui::transparent_black(),
165 (ToggleStyle::Custom(color), true) => color.opacity(0.2),
166 }
167 }
168
169 fn border_color(&self, cx: &App) -> Hsla {
170 if self.disabled {
171 return cx.theme().colors().border_variant;
172 }
173
174 match self.style.clone() {
175 ToggleStyle::Ghost => cx.theme().colors().border,
176 ToggleStyle::ElevationBased(_) => cx.theme().colors().border,
177 ToggleStyle::Custom(color) => color.opacity(0.3),
178 }
179 }
180
181 pub fn container_size() -> Pixels {
182 px(20.0)
183 }
184}
185
186impl RenderOnce for Checkbox {
187 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
188 let group_id = format!("checkbox_group_{:?}", self.id);
189 let color = if self.disabled {
190 Color::Disabled
191 } else {
192 Color::Selected
193 };
194
195 let icon = match self.toggle_state {
196 ToggleState::Selected => {
197 if self.placeholder {
198 None
199 } else {
200 Some(
201 Icon::new(IconName::Check)
202 .size(IconSize::Small)
203 .color(color),
204 )
205 }
206 }
207 ToggleState::Indeterminate => {
208 Some(Icon::new(IconName::Dash).size(IconSize::Small).color(color))
209 }
210 ToggleState::Unselected => None,
211 };
212
213 let bg_color = self.bg_color(cx);
214 let border_color = self.border_color(cx);
215 let hover_border_color = border_color.alpha(0.7);
216
217 let size = Self::container_size();
218
219 let checkbox = h_flex()
220 .group(group_id.clone())
221 .id(self.id.clone())
222 .size(size)
223 .justify_center()
224 .child(
225 div()
226 .flex()
227 .flex_none()
228 .justify_center()
229 .items_center()
230 .m_1()
231 .size_4()
232 .rounded_xs()
233 .bg(bg_color)
234 .border_1()
235 .border_color(border_color)
236 .when(self.disabled, |this| this.cursor_not_allowed())
237 .when(self.disabled, |this| {
238 this.bg(cx.theme().colors().element_disabled.opacity(0.6))
239 })
240 .when(!self.disabled && !self.visualization, |this| {
241 this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
242 })
243 .when(self.placeholder, |this| {
244 this.child(
245 div()
246 .flex_none()
247 .rounded_full()
248 .bg(color.color(cx).alpha(0.5))
249 .size(px(4.)),
250 )
251 })
252 .children(icon),
253 );
254
255 h_flex()
256 .id(self.id)
257 .map(|this| {
258 if self.disabled {
259 this.cursor_not_allowed()
260 } else if self.visualization {
261 this.cursor_default()
262 } else {
263 this.cursor_pointer()
264 }
265 })
266 .gap(DynamicSpacing::Base06.rems(cx))
267 .child(checkbox)
268 .when_some(self.label, |this, label| {
269 this.child(
270 Label::new(label)
271 .color(self.label_color)
272 .size(self.label_size),
273 )
274 })
275 .when_some(self.tooltip, |this, tooltip| {
276 this.tooltip(move |window, cx| tooltip(window, cx))
277 })
278 .when_some(
279 self.on_click.filter(|_| !self.disabled),
280 |this, on_click| {
281 this.on_click(move |click, window, cx| {
282 on_click(&self.toggle_state.inverse(), click, window, cx)
283 })
284 },
285 )
286 }
287}
288
289/// Defines the color for a switch component.
290#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
291pub enum SwitchColor {
292 #[default]
293 Accent,
294 Custom(Hsla),
295}
296
297impl SwitchColor {
298 fn get_colors(&self, is_on: bool, cx: &App) -> (Hsla, Hsla) {
299 if !is_on {
300 return (
301 cx.theme().colors().element_disabled,
302 cx.theme().colors().border,
303 );
304 }
305
306 match self {
307 SwitchColor::Accent => {
308 let status = cx.theme().status();
309 let colors = cx.theme().colors();
310 (status.info.opacity(0.4), colors.text_accent.opacity(0.2))
311 }
312 SwitchColor::Custom(color) => (*color, color.opacity(0.6)),
313 }
314 }
315}
316
317impl From<SwitchColor> for Color {
318 fn from(color: SwitchColor) -> Self {
319 match color {
320 SwitchColor::Accent => Color::Accent,
321 SwitchColor::Custom(_) => Color::Default,
322 }
323 }
324}
325
326/// Defines the color for a switch component.
327#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
328pub enum SwitchLabelPosition {
329 Start,
330 #[default]
331 End,
332}
333
334/// # Switch
335///
336/// Switches are used to represent opposite states, such as enabled or disabled.
337#[derive(IntoElement, RegisterComponent)]
338pub struct Switch {
339 id: ElementId,
340 toggle_state: ToggleState,
341 disabled: bool,
342 on_click: Option<Rc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
343 label: Option<SharedString>,
344 label_position: Option<SwitchLabelPosition>,
345 label_size: LabelSize,
346 full_width: bool,
347 key_binding: Option<KeyBinding>,
348 color: SwitchColor,
349 tab_index: Option<isize>,
350}
351
352impl Switch {
353 /// Creates a new [`Switch`].
354 pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
355 Self {
356 id: id.into(),
357 toggle_state: state,
358 disabled: false,
359 on_click: None,
360 label: None,
361 label_position: None,
362 label_size: LabelSize::Small,
363 full_width: false,
364 key_binding: None,
365 color: SwitchColor::default(),
366 tab_index: None,
367 }
368 }
369
370 /// Sets the color of the switch using the specified [`SwitchColor`].
371 pub fn color(mut self, color: SwitchColor) -> Self {
372 self.color = color;
373 self
374 }
375
376 /// Sets the disabled state of the [`Switch`].
377 pub fn disabled(mut self, disabled: bool) -> Self {
378 self.disabled = disabled;
379 self
380 }
381
382 /// Binds a handler to the [`Switch`] that will be called when clicked.
383 pub fn on_click(
384 mut self,
385 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
386 ) -> Self {
387 self.on_click = Some(Rc::new(handler));
388 self
389 }
390
391 /// Sets the label of the [`Switch`].
392 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
393 self.label = Some(label.into());
394 self
395 }
396
397 pub fn label_position(
398 mut self,
399 label_position: impl Into<Option<SwitchLabelPosition>>,
400 ) -> Self {
401 self.label_position = label_position.into();
402 self
403 }
404
405 pub fn label_size(mut self, size: LabelSize) -> Self {
406 self.label_size = size;
407 self
408 }
409
410 pub fn full_width(mut self, full_width: bool) -> Self {
411 self.full_width = full_width;
412 self
413 }
414
415 /// Display the keybinding that triggers the switch action.
416 pub fn key_binding(mut self, key_binding: impl Into<Option<KeyBinding>>) -> Self {
417 self.key_binding = key_binding.into();
418 self
419 }
420
421 pub fn tab_index(mut self, tab_index: impl Into<isize>) -> Self {
422 self.tab_index = Some(tab_index.into());
423 self
424 }
425}
426
427impl RenderOnce for Switch {
428 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
429 let is_on = self.toggle_state == ToggleState::Selected;
430 let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 };
431
432 let base_color = cx.theme().colors().text;
433 let thumb_color = base_color;
434 let (bg_color, border_color) = self.color.get_colors(is_on, cx);
435
436 let bg_hover_color = if is_on {
437 bg_color.blend(base_color.opacity(0.16 * adjust_ratio))
438 } else {
439 bg_color.blend(base_color.opacity(0.05 * adjust_ratio))
440 };
441
442 let thumb_opacity = match (is_on, self.disabled) {
443 (_, true) => 0.2,
444 (true, false) => 1.0,
445 (false, false) => 0.5,
446 };
447
448 let group_id = format!("switch_group_{:?}", self.id);
449 let label = self.label;
450
451 let switch = div()
452 .id((self.id.clone(), "switch"))
453 .p(px(1.0))
454 .border_2()
455 .border_color(cx.theme().colors().border_transparent)
456 .rounded_full()
457 .when_some(
458 self.tab_index.filter(|_| !self.disabled),
459 |this, tab_index| {
460 this.tab_index(tab_index)
461 .focus_visible(|mut style| {
462 style.border_color = Some(cx.theme().colors().border_focused);
463 style
464 })
465 .when_some(self.on_click.clone(), |this, on_click| {
466 this.on_click(move |_, window, cx| {
467 on_click(&self.toggle_state.inverse(), window, cx)
468 })
469 })
470 },
471 )
472 .child(
473 h_flex()
474 .w(DynamicSpacing::Base32.rems(cx))
475 .h(DynamicSpacing::Base20.rems(cx))
476 .group(group_id.clone())
477 .child(
478 h_flex()
479 .when(is_on, |on| on.justify_end())
480 .when(!is_on, |off| off.justify_start())
481 .size_full()
482 .rounded_full()
483 .px(DynamicSpacing::Base02.px(cx))
484 .bg(bg_color)
485 .when(!self.disabled, |this| {
486 this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
487 })
488 .border_1()
489 .border_color(border_color)
490 .child(
491 div()
492 .size(DynamicSpacing::Base12.rems(cx))
493 .rounded_full()
494 .bg(thumb_color)
495 .opacity(thumb_opacity),
496 ),
497 ),
498 );
499
500 h_flex()
501 .id(self.id)
502 .cursor_pointer()
503 .gap(DynamicSpacing::Base06.rems(cx))
504 .when(self.full_width, |this| this.w_full().justify_between())
505 .when(
506 self.label_position == Some(SwitchLabelPosition::Start),
507 |this| {
508 this.when_some(label.clone(), |this, label| {
509 this.child(Label::new(label).size(self.label_size))
510 })
511 },
512 )
513 .child(switch)
514 .when(
515 self.label_position == Some(SwitchLabelPosition::End),
516 |this| {
517 this.when_some(label, |this, label| {
518 this.child(Label::new(label).size(self.label_size))
519 })
520 },
521 )
522 .children(self.key_binding)
523 .when_some(
524 self.on_click.filter(|_| !self.disabled),
525 |this, on_click| {
526 this.on_click(move |_, window, cx| {
527 on_click(&self.toggle_state.inverse(), window, cx)
528 })
529 },
530 )
531 }
532}
533
534/// # SwitchField
535///
536/// A field component that combines a label, description, and switch into one reusable component.
537///
538/// # Examples
539///
540/// ```
541/// use ui::prelude::*;
542/// use ui::{SwitchField, ToggleState};
543///
544/// let switch_field = SwitchField::new(
545/// "feature-toggle",
546/// Some("Enable feature"),
547/// Some("This feature adds new functionality to the app.".into()),
548/// ToggleState::Unselected,
549/// |state, window, cx| {
550/// // Logic here
551/// }
552/// );
553/// ```
554#[derive(IntoElement, RegisterComponent)]
555pub struct SwitchField {
556 id: ElementId,
557 label: Option<SharedString>,
558 description: Option<SharedString>,
559 toggle_state: ToggleState,
560 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
561 disabled: bool,
562 color: SwitchColor,
563 tooltip: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyView>>,
564 tab_index: Option<isize>,
565}
566
567impl SwitchField {
568 pub fn new(
569 id: impl Into<ElementId>,
570 label: Option<impl Into<SharedString>>,
571 description: Option<SharedString>,
572 toggle_state: impl Into<ToggleState>,
573 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
574 ) -> Self {
575 Self {
576 id: id.into(),
577 label: label.map(Into::into),
578 description,
579 toggle_state: toggle_state.into(),
580 on_click: Arc::new(on_click),
581 disabled: false,
582 color: SwitchColor::Accent,
583 tooltip: None,
584 tab_index: None,
585 }
586 }
587
588 pub fn description(mut self, description: impl Into<SharedString>) -> Self {
589 self.description = Some(description.into());
590 self
591 }
592
593 pub fn disabled(mut self, disabled: bool) -> Self {
594 self.disabled = disabled;
595 self
596 }
597
598 /// Sets the color of the switch using the specified [`SwitchColor`].
599 /// This changes the color scheme of the switch when it's in the "on" state.
600 pub fn color(mut self, color: SwitchColor) -> Self {
601 self.color = color;
602 self
603 }
604
605 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
606 self.tooltip = Some(Rc::new(tooltip));
607 self
608 }
609
610 pub fn tab_index(mut self, tab_index: isize) -> Self {
611 self.tab_index = Some(tab_index);
612 self
613 }
614}
615
616impl RenderOnce for SwitchField {
617 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
618 let tooltip = self
619 .tooltip
620 .zip(self.label.clone())
621 .map(|(tooltip_fn, label)| {
622 h_flex().gap_0p5().child(Label::new(label)).child(
623 IconButton::new("tooltip_button", IconName::Info)
624 .icon_size(IconSize::XSmall)
625 .icon_color(Color::Muted)
626 .shape(crate::IconButtonShape::Square)
627 .style(ButtonStyle::Transparent)
628 .tooltip({
629 let tooltip = tooltip_fn.clone();
630 move |window, cx| tooltip(window, cx)
631 })
632 .on_click(|_, _, _| {}), // Intentional empty on click handler so that clicking on the info tooltip icon doesn't trigger the switch toggle
633 )
634 });
635
636 h_flex()
637 .id((self.id.clone(), "container"))
638 .when(!self.disabled, |this| {
639 this.hover(|this| this.cursor_pointer())
640 })
641 .w_full()
642 .gap_4()
643 .justify_between()
644 .flex_wrap()
645 .child(match (&self.description, tooltip) {
646 (Some(description), Some(tooltip)) => v_flex()
647 .gap_0p5()
648 .max_w_5_6()
649 .child(tooltip)
650 .child(Label::new(description.clone()).color(Color::Muted))
651 .into_any_element(),
652 (Some(description), None) => v_flex()
653 .gap_0p5()
654 .max_w_5_6()
655 .when_some(self.label, |this, label| this.child(Label::new(label)))
656 .child(Label::new(description.clone()).color(Color::Muted))
657 .into_any_element(),
658 (None, Some(tooltip)) => tooltip.into_any_element(),
659 (None, None) => {
660 if let Some(label) = self.label.clone() {
661 Label::new(label).into_any_element()
662 } else {
663 gpui::Empty.into_any_element()
664 }
665 }
666 })
667 .child(
668 Switch::new((self.id.clone(), "switch"), self.toggle_state)
669 .color(self.color)
670 .disabled(self.disabled)
671 .when_some(
672 self.tab_index.filter(|_| !self.disabled),
673 |this, tab_index| this.tab_index(tab_index),
674 )
675 .on_click({
676 let on_click = self.on_click.clone();
677 move |state, window, cx| {
678 (on_click)(state, window, cx);
679 }
680 }),
681 )
682 .when(!self.disabled, |this| {
683 this.on_click({
684 let on_click = self.on_click.clone();
685 let toggle_state = self.toggle_state;
686 move |_click, window, cx| {
687 (on_click)(&toggle_state.inverse(), window, cx);
688 }
689 })
690 })
691 }
692}
693
694impl Component for SwitchField {
695 fn scope() -> ComponentScope {
696 ComponentScope::Input
697 }
698
699 fn description() -> Option<&'static str> {
700 Some("A field component that combines a label, description, and switch")
701 }
702
703 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
704 Some(
705 v_flex()
706 .gap_6()
707 .children(vec![
708 example_group_with_title(
709 "States",
710 vec![
711 single_example(
712 "Unselected",
713 SwitchField::new(
714 "switch_field_unselected",
715 Some("Enable notifications"),
716 Some("Receive notifications when new messages arrive.".into()),
717 ToggleState::Unselected,
718 |_, _, _| {},
719 )
720 .into_any_element(),
721 ),
722 single_example(
723 "Selected",
724 SwitchField::new(
725 "switch_field_selected",
726 Some("Enable notifications"),
727 Some("Receive notifications when new messages arrive.".into()),
728 ToggleState::Selected,
729 |_, _, _| {},
730 )
731 .into_any_element(),
732 ),
733 ],
734 ),
735 example_group_with_title(
736 "Colors",
737 vec![
738 single_example(
739 "Default",
740 SwitchField::new(
741 "switch_field_default",
742 Some("Default color"),
743 Some("This uses the default switch color.".into()),
744 ToggleState::Selected,
745 |_, _, _| {},
746 )
747 .into_any_element(),
748 ),
749 single_example(
750 "Accent",
751 SwitchField::new(
752 "switch_field_accent",
753 Some("Accent color"),
754 Some("This uses the accent color scheme.".into()),
755 ToggleState::Selected,
756 |_, _, _| {},
757 )
758 .color(SwitchColor::Accent)
759 .into_any_element(),
760 ),
761 ],
762 ),
763 example_group_with_title(
764 "Disabled",
765 vec![single_example(
766 "Disabled",
767 SwitchField::new(
768 "switch_field_disabled",
769 Some("Disabled field"),
770 Some("This field is disabled and cannot be toggled.".into()),
771 ToggleState::Selected,
772 |_, _, _| {},
773 )
774 .disabled(true)
775 .into_any_element(),
776 )],
777 ),
778 example_group_with_title(
779 "No Description",
780 vec![single_example(
781 "No Description",
782 SwitchField::new(
783 "switch_field_disabled",
784 Some("Disabled field"),
785 None,
786 ToggleState::Selected,
787 |_, _, _| {},
788 )
789 .into_any_element(),
790 )],
791 ),
792 example_group_with_title(
793 "With Tooltip",
794 vec![
795 single_example(
796 "Tooltip with Description",
797 SwitchField::new(
798 "switch_field_tooltip_with_desc",
799 Some("Nice Feature"),
800 Some("Enable advanced configuration options.".into()),
801 ToggleState::Unselected,
802 |_, _, _| {},
803 )
804 .tooltip(Tooltip::text("This is content for this tooltip!"))
805 .into_any_element(),
806 ),
807 single_example(
808 "Tooltip without Description",
809 SwitchField::new(
810 "switch_field_tooltip_no_desc",
811 Some("Nice Feature"),
812 None,
813 ToggleState::Selected,
814 |_, _, _| {},
815 )
816 .tooltip(Tooltip::text("This is content for this tooltip!"))
817 .into_any_element(),
818 ),
819 ],
820 ),
821 ])
822 .into_any_element(),
823 )
824 }
825}
826
827impl Component for Checkbox {
828 fn scope() -> ComponentScope {
829 ComponentScope::Input
830 }
831
832 fn description() -> Option<&'static str> {
833 Some("A checkbox component that can be used for multiple choice selections")
834 }
835
836 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
837 Some(
838 v_flex()
839 .gap_6()
840 .children(vec![
841 example_group_with_title(
842 "States",
843 vec![
844 single_example(
845 "Unselected",
846 Checkbox::new("checkbox_unselected", ToggleState::Unselected)
847 .into_any_element(),
848 ),
849 single_example(
850 "Placeholder",
851 Checkbox::new("checkbox_indeterminate", ToggleState::Selected)
852 .placeholder(true)
853 .into_any_element(),
854 ),
855 single_example(
856 "Indeterminate",
857 Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
858 .into_any_element(),
859 ),
860 single_example(
861 "Selected",
862 Checkbox::new("checkbox_selected", ToggleState::Selected)
863 .into_any_element(),
864 ),
865 ],
866 ),
867 example_group_with_title(
868 "Styles",
869 vec![
870 single_example(
871 "Default",
872 Checkbox::new("checkbox_default", ToggleState::Selected)
873 .into_any_element(),
874 ),
875 single_example(
876 "Filled",
877 Checkbox::new("checkbox_filled", ToggleState::Selected)
878 .fill()
879 .into_any_element(),
880 ),
881 single_example(
882 "ElevationBased",
883 Checkbox::new("checkbox_elevation", ToggleState::Selected)
884 .style(ToggleStyle::ElevationBased(
885 ElevationIndex::EditorSurface,
886 ))
887 .into_any_element(),
888 ),
889 single_example(
890 "Custom Color",
891 Checkbox::new("checkbox_custom", ToggleState::Selected)
892 .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
893 .into_any_element(),
894 ),
895 ],
896 ),
897 example_group_with_title(
898 "Disabled",
899 vec![
900 single_example(
901 "Unselected",
902 Checkbox::new(
903 "checkbox_disabled_unselected",
904 ToggleState::Unselected,
905 )
906 .disabled(true)
907 .into_any_element(),
908 ),
909 single_example(
910 "Selected",
911 Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
912 .disabled(true)
913 .into_any_element(),
914 ),
915 ],
916 ),
917 example_group_with_title(
918 "With Label",
919 vec![single_example(
920 "Default",
921 Checkbox::new("checkbox_with_label", ToggleState::Selected)
922 .label("Always save on quit")
923 .into_any_element(),
924 )],
925 ),
926 example_group_with_title(
927 "Extra",
928 vec![single_example(
929 "Visualization-Only",
930 Checkbox::new("viz_only", ToggleState::Selected)
931 .visualization_only(true)
932 .into_any_element(),
933 )],
934 ),
935 ])
936 .into_any_element(),
937 )
938 }
939}
940
941impl Component for Switch {
942 fn scope() -> ComponentScope {
943 ComponentScope::Input
944 }
945
946 fn description() -> Option<&'static str> {
947 Some("A switch component that represents binary states like on/off")
948 }
949
950 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
951 Some(
952 v_flex()
953 .gap_6()
954 .children(vec![
955 example_group_with_title(
956 "States",
957 vec![
958 single_example(
959 "Off",
960 Switch::new("switch_off", ToggleState::Unselected)
961 .on_click(|_, _, _cx| {})
962 .into_any_element(),
963 ),
964 single_example(
965 "On",
966 Switch::new("switch_on", ToggleState::Selected)
967 .on_click(|_, _, _cx| {})
968 .into_any_element(),
969 ),
970 ],
971 ),
972 example_group_with_title(
973 "Colors",
974 vec![
975 single_example(
976 "Accent (Default)",
977 Switch::new("switch_accent_style", ToggleState::Selected)
978 .on_click(|_, _, _cx| {})
979 .into_any_element(),
980 ),
981 single_example(
982 "Custom",
983 Switch::new("switch_custom_style", ToggleState::Selected)
984 .color(SwitchColor::Custom(hsla(300.0 / 360.0, 0.6, 0.6, 1.0)))
985 .on_click(|_, _, _cx| {})
986 .into_any_element(),
987 ),
988 ],
989 ),
990 example_group_with_title(
991 "Disabled",
992 vec![
993 single_example(
994 "Off",
995 Switch::new("switch_disabled_off", ToggleState::Unselected)
996 .disabled(true)
997 .into_any_element(),
998 ),
999 single_example(
1000 "On",
1001 Switch::new("switch_disabled_on", ToggleState::Selected)
1002 .disabled(true)
1003 .into_any_element(),
1004 ),
1005 ],
1006 ),
1007 example_group_with_title(
1008 "With Label",
1009 vec![
1010 single_example(
1011 "Start Label",
1012 Switch::new("switch_with_label_start", ToggleState::Selected)
1013 .label("Always save on quit")
1014 .label_position(SwitchLabelPosition::Start)
1015 .into_any_element(),
1016 ),
1017 single_example(
1018 "End Label",
1019 Switch::new("switch_with_label_end", ToggleState::Selected)
1020 .label("Always save on quit")
1021 .label_position(SwitchLabelPosition::End)
1022 .into_any_element(),
1023 ),
1024 single_example(
1025 "Default Size Label",
1026 Switch::new(
1027 "switch_with_label_default_size",
1028 ToggleState::Selected,
1029 )
1030 .label("Always save on quit")
1031 .label_size(LabelSize::Default)
1032 .into_any_element(),
1033 ),
1034 single_example(
1035 "Small Size Label",
1036 Switch::new("switch_with_label_small_size", ToggleState::Selected)
1037 .label("Always save on quit")
1038 .label_size(LabelSize::Small)
1039 .into_any_element(),
1040 ),
1041 ],
1042 ),
1043 example_group_with_title(
1044 "With Keybinding",
1045 vec![single_example(
1046 "Keybinding",
1047 Switch::new("switch_with_keybinding", ToggleState::Selected)
1048 .key_binding(Some(KeyBinding::from_keystrokes(
1049 vec![KeybindingKeystroke::from_keystroke(
1050 Keystroke::parse("cmd-s").unwrap(),
1051 )]
1052 .into(),
1053 false,
1054 )))
1055 .into_any_element(),
1056 )],
1057 ),
1058 ])
1059 .into_any_element(),
1060 )
1061 }
1062}