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

✨ feat(example): add components page

Browse source
This commit is contained in:
luoxiao 2023-05-23 13:32:34 +08:00
parent a9e82e994e
commit db11387912
5 changed files with 56 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/basic/index.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link data-trunk rel="css" href="./src/assets/css/index.css" />
</head> </head>
<body> <body>

11
examples/basic/src/app.rs
View file

@ -1,3 +1,4 @@
use crate::components::*;
use crate::pages::*; use crate::pages::*;
use leptos::*; use leptos::*;
use leptos_router::*; use leptos_router::*;
@ -16,6 +17,16 @@ pub fn App(cx: Scope) -> impl IntoView {
<Route path="/slider" view=move |cx| view! {cx, <Route path="/slider" view=move |cx| view! {cx,
<SliderPage /> <SliderPage />
} /> } />
<Route path="/components" view=move |cx| view! {cx,
<ComponentsPage />
} >
<Route path="/menu" view=move |cx| view! {cx,
<MenuPage />
} />
<Route path="/slider" view=move |cx| view! {cx,
<SliderPage />
} />
</Route>
</Routes> </Routes>
</Router> </Router>
} }

16
examples/basic/src/assets/css/index.css Normal file
View file

@ -0,0 +1,16 @@
body {
margin: 0;
}
.components-page-box {
display: flex;
}
.components-page-box aside {
width: 260px;
}
.components-page-box main {
flex: 1;
}

27
examples/basic/src/components.rs Normal file
View file

@ -0,0 +1,27 @@
use leptos::*;
use leptos_router::{Outlet, use_route, use_router};
use melt_ui::*;
#[component]
pub fn ComponentsPage(cx: Scope) -> impl IntoView {
let router = use_router(cx);
let route = use_route(cx);
let selected = create_rw_signal(cx, String::from(""));
create_effect(cx, move |_| {
let path = route.original_path();
let path2 = route.path();
log!("{:?} {}", path, path2);
});
view! {cx,
<div class="components-page-box">
<aside>
<Menu selected>
<MenuItem key="slider" label="slider" />
</Menu>
</aside>
<main>
<Outlet />
</main>
</div>
}
}

1
examples/basic/src/main.rs
View file

@ -4,6 +4,7 @@ mod demo_checkbox;
mod demo_modal; mod demo_modal;
mod demo_slider; mod demo_slider;
mod pages; mod pages;
mod components;
use app::*; use app::*;
use leptos::*; use leptos::*;