feat(gh-pages): space component

gh-pages/src/app.rs

@@ -21,6 +21,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/toast" view=ToastPage />
                     <Route path="/tabs" view=TabsPage />
                     <Route path="/select" view=SelectPage />
+                    <Route path="/space" view=SpacePage />
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage />
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage />

gh-pages/src/pages/checkbox/mod.rs

@@ -28,7 +28,7 @@ pub fn CheckboxPage() -> impl IntoView {
                     }
                 </DemoCode>
             </Demo>
-
+            <h3>"group"</h3>
             <Demo>
                 <CheckboxGroup value>
                     <CheckboxItem label="apple" value="a" />

gh-pages/src/pages/components.rs

@@ -48,6 +48,7 @@ pub fn ComponentsPage() -> impl IntoView {
                         <MenuItem key="toast" label="toast" />
                         <MenuItem key="tabs" label="tabs" />
                         <MenuItem key="select" label="select" />
+                        <MenuItem key="space" label="space" />
                     </Menu>
                 </LayoutSider>
                 <Layout style="padding: 8px 12px 28px; overflow-y: scroll;">

gh-pages/src/pages/mod.rs

@@ -10,6 +10,7 @@ mod modal;
 mod nav_bar;
 mod select;
 mod slider;
+mod space;
 mod tabbar;
 mod tabs;
 mod toast;
@@ -26,6 +27,7 @@ pub use modal::*;
 pub use nav_bar::*;
 pub use select::*;
 pub use slider::*;
+pub use space::*;
 pub use tabbar::*;
 pub use tabs::*;
 pub use toast::*;

gh-pages/src/pages/space/mod.rs

@@ -0,0 +1,60 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn SpacePage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Space"</h1>
+            <Demo>
+                <Space>
+                    <Button>"1"</Button>
+                    <Button>"2"</Button>
+                    <Button>"3"</Button>
+                </Space>
+                <DemoCode slot>
+                    {
+                        indoc!(r#"
+                        <Space>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                        "#)
+                    }
+                </DemoCode>
+            </Demo>
+            <h3>"gap"</h3>
+            <Demo>
+                <Space gap=SpaceGap::LARGE>
+                    <Button>"1"</Button>
+                    <Button>"2"</Button>
+                    <Button>"3"</Button>
+                </Space>
+                <Space gap=SpaceGap::TUPLE(36, 36)>
+                    <Button>"1"</Button>
+                    <Button>"2"</Button>
+                    <Button>"3"</Button>
+                </Space>
+                <DemoCode slot>
+                    {
+                        indoc!(r#"
+                        <Space gap=SpaceGap::LARGE>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                        <Space gap=SpaceGap::TUPLE(36, 36)>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                        "#)
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}