adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -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="/installation" view=InstallationPage/>
<Route path="/usage" view=UsagePage/>
<Route path="/server-sider-rendering" view=ServerSiderRenderingPage/>
</Route>
<Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage/>

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

@ -1,10 +1,12 @@
mod installation;
mod server_sider_rendering;
mod usage;
use crate::components::SiteHeader;
pub use installation::*;
use leptos::*;
use leptos_router::{use_location, use_navigate, Outlet};
pub use server_sider_rendering::*;
use thaw::*;
pub use usage::*;
@ -79,17 +81,26 @@ impl IntoView for MenuItemOption {
}
pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
vec![MenuGroupOption {
label: "Getting Started".into(),
children: vec![
MenuItemOption {
value: "installation".into(),
label: "Installation".into(),
},
MenuItemOption {
value: "usage".into(),
label: "Usage".into(),
},
],
}]
vec![
MenuGroupOption {
label: "Getting Started".into(),
children: vec![
MenuItemOption {
value: "installation".into(),
label: "Installation".into(),
},
MenuItemOption {
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!(
r#"
let value = create_rw_signal("apple");
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
let value = create_rw_signal(String::from("apple"));
view! {
<Tabs value>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
}
"#,
"rust"
)}
@ -50,13 +53,19 @@ pub fn TabsPage() -> impl IntoView {
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<String>"</td>
<td>"Default::default()"</td>
<td>
<Text code=true>"RwSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Tabs value."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Tabs content."</td>
</tr>
@ -75,19 +84,25 @@ pub fn TabsPage() -> impl IntoView {
<tbody>
<tr>
<td>"key"</td>
<td>"String"</td>
<td>
<Text code=true>"String"</Text>
</td>
<td></td>
<td>"The indentifier of the tab."</td>
</tr>
<tr>
<td>"label"</td>
<td>"String"</td>
<td>
<Text code=true>"String"</Text>
</td>
<td></td>
<td>"The label of the tab."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td>
<Text code=true>"Children"</Text>
</td>
<td></td>
<td>"Tab's content."</td>
</tr>