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