dioxus_tw_components/components/organisms/form/toggle/
props.rs

1use crate::attributes::*;
2use dioxus::prelude::*;
3use dioxus_core::AttributeValue;
4use dioxus_tw_components_macro::UiComp;
5
6#[derive(Default, Clone, PartialEq, Props, UiComp)]
7pub struct ToggleProps {
8    #[props(extends = button, extends = GlobalAttributes)]
9    attributes: Vec<Attribute>,
10    #[props(optional)]
11    checked: Option<bool>,
12
13    #[props(optional)]
14    onclick: EventHandler<MouseEvent>,
15
16    #[props(optional, default)]
17    pub color: ReadOnlySignal<Color>,
18    #[props(optional, default)]
19    pub size: ReadOnlySignal<Size>,
20    #[props(optional, default)]
21    pub animation: ReadOnlySignal<Animation>,
22}
23
24// Specifically stylised input type checkbox
25// The input use the tailwind peer class, you can use at your advantage to style the children
26// eg peer-disabled:font-mute will change children text-color when the input is disabled (Label component already does this by default)
27#[component]
28pub fn Toggle(mut props: ToggleProps) -> Element {
29    props.update_class_attribute();
30
31    let mut interior_sig = use_signal(|| props.checked.unwrap_or_default());
32
33    let onclick = move |event| {
34        interior_sig.toggle();
35        props.onclick.call(event);
36    };
37
38    rsx! {
39        button {
40            "data-state": match interior_sig() {
41                true => AttributeValue::Text("active".to_string()),
42                false => AttributeValue::Text("inactive".to_string()),
43            },
44            r#type: "button",
45            onclick,
46            ..props.attributes,
47        }
48    }
49}