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