mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
✨ feat(example): add components page
This commit is contained in:
parent
a9e82e994e
commit
db11387912
5 changed files with 56 additions and 0 deletions
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link data-trunk rel="css" href="./src/assets/css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
use crate::components::*;
|
||||
use crate::pages::*;
|
||||
use leptos::*;
|
||||
use leptos_router::*;
|
||||
|
@ -16,6 +17,16 @@ pub fn App(cx: Scope) -> impl IntoView {
|
|||
<Route path="/slider" view=move |cx| view! {cx,
|
||||
<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>
|
||||
</Router>
|
||||
}
|
||||
|
|
16
examples/basic/src/assets/css/index.css
Normal file
16
examples/basic/src/assets/css/index.css
Normal 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
27
examples/basic/src/components.rs
Normal 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>
|
||||
}
|
||||
}
|
|
@ -4,6 +4,7 @@ mod demo_checkbox;
|
|||
mod demo_modal;
|
||||
mod demo_slider;
|
||||
mod pages;
|
||||
mod components;
|
||||
|
||||
use app::*;
|
||||
use leptos::*;
|
||||
|
|
Loading…
Add table
Reference in a new issue