feat(example): add components page

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

View file

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

View file

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

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

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

View file

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