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

feat(demo): layout

Browse source
This commit is contained in:
luoxiao 2023-11-08 22:35:00 +08:00
parent 2f5cbc430e
commit 7a8dd6c813
6 changed files with 73 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/gh-pages Submodule

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

1
demo/src/app.rs
View file

@ -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/>

4
demo/src/pages/components.rs
View file

@ -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(),

7
demo/src/pages/grid/mod.rs
View file

@ -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! {

62
demo/src/pages/layout/mod.rs Normal file
View file

@ -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>
}
}

2
demo/src/pages/mod.rs
View file

@ -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::*;