dioxus_element_plug/components/
button_group.rs

1use dioxus::prelude::*;
2
3/// ButtonGroup size variants
4#[derive(Clone, PartialEq)]
5pub enum ButtonGroupSize {
6    Large,
7    Default,
8    Small,
9}
10
11impl ButtonGroupSize {
12    pub fn as_class(&self) -> &'static str {
13        match self {
14            ButtonGroupSize::Large => "el-button-group--large",
15            ButtonGroupSize::Default => "",
16            ButtonGroupSize::Small => "el-button-group--small",
17        }
18    }
19}
20
21/// ButtonGroup direction
22#[derive(Clone, PartialEq)]
23pub enum ButtonGroupDirection {
24    Horizontal,
25    Vertical,
26}
27
28/// ButtonGroup props
29#[derive(Props, Clone, PartialEq)]
30pub struct ButtonGroupProps {
31    /// Button group content
32    #[props(default)]
33    pub children: Element,
34
35    /// Button group size
36    #[props(default = ButtonGroupSize::Default)]
37    pub size: ButtonGroupSize,
38
39    /// Button group direction
40    #[props(default = ButtonGroupDirection::Horizontal)]
41    pub direction: ButtonGroupDirection,
42
43    /// Additional CSS classes
44    #[props(default)]
45    pub class: Option<String>,
46
47    /// Inline styles
48    #[props(default)]
49    pub style: Option<String>,
50}
51
52/// ButtonGroup component for grouping related buttons
53///
54/// ## Example
55///
56/// ```rust,ignore
57/// rsx! {
58///     ButtonGroup {
59///         Button { "Prev" }
60///         Button { "Next" }
61///     }
62/// }
63/// ```
64#[component]
65pub fn ButtonGroup(props: ButtonGroupProps) -> Element {
66    let mut class_names = vec!["el-button-group".to_string()];
67
68    let size_class = props.size.as_class();
69    if !size_class.is_empty() {
70        class_names.push(size_class.to_string());
71    }
72
73    match props.direction {
74        ButtonGroupDirection::Horizontal => {}
75        ButtonGroupDirection::Vertical => class_names.push("is-vertical".to_string()),
76    }
77
78    if let Some(ref custom_class) = props.class {
79        class_names.push(custom_class.clone());
80    }
81
82    let class_string = class_names.join(" ");
83    let style_string = props.style.clone().unwrap_or_default();
84
85    rsx! {
86        div {
87            class: "{class_string}",
88            style: "{style_string}",
89            role: "group",
90            {props.children}
91        }
92    }
93}
dioxus_element_plug/components/button_group.rs

dioxus_element_plug/components/
button_group.rs
