dioxus_ui_system/molecules/
separator.rs

1//! Separator molecule component
2//!
3//! Visually or semantically separates content.
4
5use crate::styles::Style;
6use crate::theme::{use_style, use_theme};
7use dioxus::prelude::*;
8
9/// Separator orientation
10#[derive(Default, Clone, PartialEq)]
11pub enum SeparatorOrientation {
12    /// Horizontal separator (default)
13    #[default]
14    Horizontal,
15    /// Vertical separator
16    Vertical,
17}
18
19/// Separator properties
20#[derive(Props, Clone, PartialEq)]
21pub struct SeparatorProps {
22    /// Separator orientation
23    #[props(default)]
24    pub orientation: SeparatorOrientation,
25    /// Whether the separator is decorative only
26    #[props(default = true)]
27    pub decorative: bool,
28    /// Custom inline styles
29    #[props(default)]
30    pub style: Option<String>,
31    /// Custom class name
32    #[props(default)]
33    pub class: Option<String>,
34}
35
36/// Separator molecule component
37#[component]
38pub fn Separator(props: SeparatorProps) -> Element {
39    let _theme = use_theme();
40
41    let is_horizontal = props.orientation == SeparatorOrientation::Horizontal;
42
43    let separator_style = use_style(move |t| {
44        if is_horizontal {
45            Style::new()
46                .w_full()
47                .h_px(1)
48                .bg(&t.colors.border)
49                .my(&t.spacing, "md")
50                .build()
51        } else {
52            Style::new()
53                .w_px(1)
54                .h_full()
55                .bg(&t.colors.border)
56                .mx(&t.spacing, "md")
57                .build()
58        }
59    });
60
61    let aria_props = if props.decorative {
62        "aria-hidden: true;"
63    } else {
64        "role: separator;"
65    };
66
67    let orientation_attr = if is_horizontal {
68        "horizontal"
69    } else {
70        "vertical"
71    };
72
73    rsx! {
74        div {
75            style: "{separator_style} {props.style.clone().unwrap_or_default()} {aria_props}",
76            class: "{props.class.clone().unwrap_or_default()}",
77            aria_orientation: "{orientation_attr}",
78        }
79    }
80}
dioxus_ui_system/molecules/separator.rs

dioxus_ui_system/molecules/
separator.rs
