dioxus_element_plug/components/
color_picker.rs

1use dioxus::prelude::*;
2
3/// ColorPicker props
4#[derive(Props, Clone, PartialEq)]
5pub struct ColorPickerProps {
6    #[props(default = "#409EFF".to_string())]
7    pub model_value: String,
8
9    #[props(default = false)]
10    pub disabled: bool,
11
12    #[props(default = false)]
13    pub show_alpha: bool,
14
15    #[props(default = "hex".to_string())]
16    pub color_format: String,
17
18    #[props(default)]
19    pub on_change: Option<EventHandler<String>>,
20
21    #[props(default)]
22    pub class: Option<String>,
23
24    #[props(default)]
25    pub style: Option<String>,
26}
27
28/// ColorPicker component for selecting colors
29#[component]
30pub fn ColorPicker(props: ColorPickerProps) -> Element {
31    let mut class_names = vec!["el-color-picker".to_string()];
32    if props.disabled { class_names.push("is-disabled".to_string()); }
33    if let Some(ref c) = props.class { class_names.push(c.clone()); }
34
35    let color_clone = props.model_value.clone();
36
37    rsx! {
38        div {
39            class: "{class_names.join(\" \")}",
40            style: props.style.clone().unwrap_or_default(),
41            div {
42                class: "el-color-picker__trigger",
43                style: "background-color: {props.model_value};",
44                onclick: move |_| {
45                    if !props.disabled {
46                        if let Some(handler) = props.on_change {
47                            handler.call(color_clone.clone());
48                        }
49                    }
50                },
51            }
52        }
53    }
54}
dioxus_element_plug/components/color_picker.rs

dioxus_element_plug/components/
color_picker.rs
