dioxus_element_plug/components/
space.rs

1use dioxus::prelude::*;
2
3/// Space direction
4#[derive(Clone, PartialEq)]
5pub enum SpaceDirection {
6    Horizontal,
7    Vertical,
8}
9
10/// Space alignment
11#[derive(Clone, PartialEq)]
12pub enum SpaceAlignment {
13    Start,
14    Center,
15    End,
16    Baseline,
17    Stretch,
18}
19
20impl SpaceAlignment {
21    pub fn as_str(&self) -> &'static str {
22        match self {
23            SpaceAlignment::Start => "start",
24            SpaceAlignment::Center => "center",
25            SpaceAlignment::End => "end",
26            SpaceAlignment::Baseline => "baseline",
27            SpaceAlignment::Stretch => "stretch",
28        }
29    }
30}
31
32/// Space props
33#[derive(Props, Clone, PartialEq)]
34pub struct SpaceProps {
35    #[props(default)]
36    pub children: Element,
37
38    #[props(default = SpaceDirection::Horizontal)]
39    pub direction: SpaceDirection,
40
41    #[props(default = SpaceAlignment::Center)]
42    pub alignment: SpaceAlignment,
43
44    #[props(default = "8px".to_string())]
45    pub size: String,
46
47    #[props(default = false)]
48    pub wrap: bool,
49
50    #[props(default = false)]
51    pub fill: bool,
52
53    #[props(default)]
54    pub class: Option<String>,
55
56    #[props(default)]
57    pub style: Option<String>,
58}
59
60/// Space component for consistent spacing between elements
61#[component]
62pub fn Space(props: SpaceProps) -> Element {
63    let mut class_names = vec!["el-space".to_string()];
64    if props.fill { class_names.push("el-space--fill".to_string()); }
65    if let Some(ref c) = props.class { class_names.push(c.clone()); }
66    let class_string = class_names.join(" ");
67
68    let dir = match props.direction {
69        SpaceDirection::Horizontal => "row",
70        SpaceDirection::Vertical => "column",
71    };
72    let wrap = if props.wrap { "wrap" } else { "nowrap" };
73
74    rsx! {
75        div {
76            class: "{class_string}",
77            style: "display: flex; flex-direction: {dir}; flex-wrap: {wrap}; align-items: {props.alignment.as_str()}; gap: {props.size}; {props.style.clone().unwrap_or_default()}",
78            {props.children}
79        }
80    }
81}
dioxus_element_plug/components/space.rs

dioxus_element_plug/components/
space.rs
