dioxus_element_plug/components/
divider.rs

1use dioxus::prelude::*;
2
3/// Divider direction
4#[derive(Clone, PartialEq)]
5pub enum DividerDirection {
6    Horizontal,
7    Vertical,
8}
9
10impl DividerDirection {
11    pub fn as_str(&self) -> &'static str {
12        match self {
13            DividerDirection::Horizontal => "horizontal",
14            DividerDirection::Vertical => "vertical",
15        }
16    }
17}
18
19/// Content position on divider
20#[derive(Clone, PartialEq)]
21pub enum DividerContentPosition {
22    Left,
23    Center,
24    Right,
25}
26
27impl DividerContentPosition {
28    pub fn as_class(&self) -> &'static str {
29        match self {
30            DividerContentPosition::Left => "is-left",
31            DividerContentPosition::Center => "",
32            DividerContentPosition::Right => "is-right",
33        }
34    }
35}
36
37/// Divider props
38#[derive(Props, Clone, PartialEq)]
39pub struct DividerProps {
40    /// Divider content
41    #[props(default)]
42    pub children: Option<Element>,
43
44    /// Direction of divider
45    #[props(default = DividerDirection::Horizontal)]
46    pub direction: DividerDirection,
47
48    /// Position of content on the divider line
49    #[props(default = DividerContentPosition::Center)]
50    pub content_position: DividerContentPosition,
51
52    /// Border style
53    #[props(default = "solid".to_string())]
54    pub border_style: String,
55
56    /// Additional CSS classes
57    #[props(default)]
58    pub class: Option<String>,
59
60    /// Inline styles
61    #[props(default)]
62    pub style: Option<String>,
63}
64
65/// Divider component for sectioning content
66///
67/// ## Example
68///
69/// ```rust,ignore
70/// rsx! {
71///     Divider { "Section Title" }
72///     Divider { direction: DividerDirection::Vertical }
73/// }
74/// ```
75#[component]
76pub fn Divider(props: DividerProps) -> Element {
77    let mut class_names = vec!["el-divider".to_string()];
78    class_names.push(format!("el-divider--{}", props.direction.as_str()));
79
80    let has_content = props.children.is_some();
81    if has_content && props.direction == DividerDirection::Horizontal {
82        let pos_class = props.content_position.as_class();
83        if !pos_class.is_empty() {
84            class_names.push(pos_class.to_string());
85        }
86        class_names.push("el-divider--text".to_string());
87    }
88
89    if let Some(ref custom_class) = props.class {
90        class_names.push(custom_class.clone());
91    }
92
93    let class_string = class_names.join(" ");
94    let style_string = format!(
95        "border-top-style: {}; {}",
96        props.border_style,
97        props.style.clone().unwrap_or_default()
98    );
99
100    if has_content && props.direction == DividerDirection::Horizontal {
101        rsx! {
102            div {
103                class: "{class_string}",
104                style: "{style_string}",
105                div {
106                    class: "el-divider__text",
107                    {props.children}
108                }
109            }
110        }
111    } else {
112        rsx! {
113            div {
114                class: "{class_string}",
115                style: "{style_string}",
116            }
117        }
118    }
119}
dioxus_element_plug/components/divider.rs

dioxus_element_plug/components/
divider.rs
