✨ feat: 添加 space 组件

examples/basic/src/main.rs

@@ -11,7 +11,7 @@ pub fn App(cx: Scope) -> impl IntoView {
     let (open, set_open) = create_signal(cx, true);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
     view! { cx,
-        <div class="root">
+        <Space>
             <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
             <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
             {move || count.get()}
@@ -19,7 +19,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                 "sd" {move || count.get()}
             </Modal>
             <Progress percentage=count/>
-        </div>
+        </Space>
     }
 }
 

src/lib.rs

@@ -2,6 +2,7 @@ mod button;
 mod card;
 mod modal;
 mod progress;
+mod space;
 mod table;
 mod teleport;
 mod theme;
@@ -10,4 +11,5 @@ mod utils;
 pub use button::*;
 pub use modal::*;
 pub use progress::*;
+pub use space::*;
 pub use table::*;

src/space/mod.rs

@@ -0,0 +1,41 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[derive(Default)]
+pub enum SpaceGap {
+    SMALL,
+    #[default]
+    MEDIUM,
+    LARGE,
+    NUMBER(u16),
+    TUPLE(u16, u16),
+}
+
+#[component]
+pub fn Space(cx: Scope, #[prop(optional)] gap: SpaceGap, children: Children) -> impl IntoView {
+    let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css"));
+    let gap = match gap {
+        SpaceGap::SMALL => "gap: 4px 8px".into(),
+        SpaceGap::MEDIUM => "gap: 8px 12px".into(),
+        SpaceGap::LARGE => "gap: 12px 16px".into(),
+        SpaceGap::NUMBER(size) => format!("gap: {size}px {size}px"),
+        SpaceGap::TUPLE(x, y) => format!("gap: {x}px {y}px"),
+    };
+
+    view! {
+        cx, class=class_name,
+        <div class="melt-space" style=format!("{gap};")>
+            {
+                children(cx).nodes.into_iter().map(|node| {
+                    view! {
+                        cx, class=class_name,
+                        <div class="melt-space__item">
+                            {node}
+                        </div>
+                    }
+                }).collect::<Vec<_>>()
+            }
+        </div>
+    }
+}

src/space/space.css

@@ -0,0 +1,7 @@
+.melt-space {
+    display: flex;
+}
+
+.melt-space__item {
+    max-width: 100%;
+}