adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Demo/231217 (#52)

Browse source 
* fix(demo): tabs demo

* demo: add server sider rendering
This commit is contained in:
luoxiaozero 2023-12-17 17:37:02 +08:00 • committed by GitHub
parent d94c8ed4c6
commit 89ee294040
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 86 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/app.rs
View file

@ -38,6 +38,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/guide" view=GuidePage> <Route path="/guide" view=GuidePage>
<Route path="/installation" view=InstallationPage/> <Route path="/installation" view=InstallationPage/>
<Route path="/usage" view=UsagePage/> <Route path="/usage" view=UsagePage/>
<Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
</Route> </Route>
<Route path="/components" view=ComponentsPage> <Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage/> <Route path="/menu" view=MenuPage/>

37
demo/src/pages/guide/mod.rs
View file

@ -1,10 +1,12 @@
mod installation; mod installation;
mod server_sider_rendering;
mod usage; mod usage;
use crate::components::SiteHeader; use crate::components::SiteHeader;
pub use installation::*; pub use installation::*;
use leptos::*; use leptos::*;
use leptos_router::{use_location, use_navigate, Outlet}; use leptos_router::{use_location, use_navigate, Outlet};
pub use server_sider_rendering::*;
use thaw::*; use thaw::*;
pub use usage::*; pub use usage::*;
@ -79,17 +81,26 @@ impl IntoView for MenuItemOption {
} }
pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> { pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
vec![MenuGroupOption { vec![
label: "Getting Started".into(), MenuGroupOption {
children: vec![ label: "Getting Started".into(),
MenuItemOption { children: vec![
value: "installation".into(), MenuItemOption {
label: "Installation".into(), value: "installation".into(),
}, label: "Installation".into(),
MenuItemOption { },
value: "usage".into(), MenuItemOption {
label: "Usage".into(), value: "usage".into(),
}, label: "Usage".into(),
], },
}] ],
},
MenuGroupOption {
label: "Guides".into(),
children: vec![MenuItemOption {
value: "server-sider-rendering".into(),
label: "Server Sider Rendering".into(),
}],
},
]
} }

31
demo/src/pages/guide/server_sider_rendering.rs Normal file
View file

@ -0,0 +1,31 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
#[component]
pub fn ServerSiderRenderingPage() -> impl IntoView {
let ssr_config = r#"thaw = { ..., default-features = false, features = ["ssr"] }"#;
let hydrate_config = r#"thaw = { ..., default-features = false, features = ["hydrate"] }"#;
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Server Sider Rendering"</h1>
<p>"To enable the ssr mode, the following configurations are required:"</p>
<Demo>
""
<DemoCode slot>
{ssr_config}
</DemoCode>
</Demo>
<p>"To enable the hydrate mode, the following configurations are required:"</p>
<Demo>
""
<DemoCode slot>
{hydrate_config}
</DemoCode>
</Demo>
</div>
}
}

45
demo/src/pages/tabs/mod.rs
View file

@ -22,15 +22,18 @@ pub fn TabsPage() -> impl IntoView {
{highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal("apple"); let value = create_rw_signal(String::from("apple"));
<Tabs value>
<Tab key="apple" label="Apple"> view! {
"apple" <Tabs value>
</Tab> <Tab key="apple" label="Apple">
<Tab key="pear" label="Pear"> "apple"
"pear" </Tab>
</Tab> <Tab key="pear" label="Pear">
</Tabs> "pear"
</Tab>
</Tabs>
}
"#, "#,
"rust" "rust"
)} )}
@ -50,13 +53,19 @@ pub fn TabsPage() -> impl IntoView {
<tbody> <tbody>
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"RwSignal<String>"</td> <td>
<td>"Default::default()"</td> <Text code=true>"RwSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Tabs value."</td> <td>"Tabs value."</td>
</tr> </tr>
<tr> <tr>
<td>"children"</td> <td>"children"</td>
<td>"Children"</td> <td>
<Text code=true>"Children"</Text>
</td>
<td></td> <td></td>
<td>"Tabs content."</td> <td>"Tabs content."</td>
</tr> </tr>
@ -75,19 +84,25 @@ pub fn TabsPage() -> impl IntoView {
<tbody> <tbody>
<tr> <tr>
<td>"key"</td> <td>"key"</td>
<td>"String"</td> <td>
<Text code=true>"String"</Text>
</td>
<td></td> <td></td>
<td>"The indentifier of the tab."</td> <td>"The indentifier of the tab."</td>
</tr> </tr>
<tr> <tr>
<td>"label"</td> <td>"label"</td>
<td>"String"</td> <td>
<Text code=true>"String"</Text>
</td>
<td></td> <td></td>
<td>"The label of the tab."</td> <td>"The label of the tab."</td>
</tr> </tr>
<tr> <tr>
<td>"children"</td> <td>"children"</td>
<td>"Children"</td> <td>
<Text code=true>"Children"</Text>
</td>
<td></td> <td></td>
<td>"Tab's content."</td> <td>"Tab's content."</td>
</tr> </tr>