feat(demo): layout

demo/gh-pages

@@ -0,0 +1 @@
+Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/app.rs

@@ -80,6 +80,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/upload" view=UploadPage/>
                     <Route path="/loading-bar" view=LoadingBarPage/>
                     <Route path="/breadcrumb" view=BreadcrumbPage/>
+                    <Route path="/layout" view=LayoutPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -214,6 +214,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
         MenuGroupOption {
             label: "Layout Components".into(),
             children: vec![
+                MenuItemOption {
+                    value: "layout".into(),
+                    label: "Layout".into(),
+                },
                 MenuItemOption {
                     value: "grid".into(),
                     label: "Grid".into(),

demo/src/pages/grid/mod.rs

@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use thaw::*;
 use prisms::highlight_str;
+use thaw::*;
 
 #[component]
 pub fn GridPage() -> impl IntoView {
@@ -9,15 +9,14 @@ pub fn GridPage() -> impl IntoView {
         "grid-demo",
         r#".thaw-grid-item {
         height: 60px;
-        color: white;
         text-align: center;
         line-height: 60px;
       }
       .thaw-grid-item:nth-child(odd) {
-        background-color: #3d8ae5dd;
+        background-color: #0078ff88;
       }
       .thaw-grid-item:nth-child(even) {
-        background-color: #3d8ae5aa;
+        background-color: #0078ffaa;
       }"#,
     );
     view! {

demo/src/pages/layout/mod.rs

@@ -0,0 +1,62 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn LayoutPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Layout"</h1>
+            <Demo>
+                <Layout>
+                    <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                    <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                </Layout>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Layout>
+                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                    </Layout>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"sider"</h3>
+            <Demo>
+                <Layout has_sider=true>
+                    <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                    <Layout>
+                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                    </Layout>
+                </Layout>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Layout has_sider=true>
+                        <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                        <Layout>
+                            <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                            <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                        </Layout>
+                    </Layout>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/mod.rs

@@ -16,6 +16,7 @@ mod icon;
 mod image;
 mod input;
 mod input_number;
+mod layout;
 mod loading_bar;
 mod menu;
 mod message;
@@ -53,6 +54,7 @@ pub use icon::*;
 pub use image::*;
 pub use input::*;
 pub use input_number::*;
+pub use layout::*;
 pub use loading_bar::*;
 pub use menu::*;
 pub use message::*;