feat(example): add leptos_router

This commit is contained in:
luoxiao 2023-05-17 12:51:48 +08:00
parent e0c21b5f28
commit 0c34929119
5 changed files with 78 additions and 54 deletions

View file

@ -9,3 +9,4 @@ edition = "2021"
leptos = { version = "0.3.0", features = ["stable"] }
melt-ui = { path = "../../" }
leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
leptos_router = { version = "0.3.0", features = ["csr"] }

16
examples/basic/src/app.rs Normal file
View file

@ -0,0 +1,16 @@
use crate::pages::*;
use leptos::*;
use leptos_router::*;
#[component]
pub fn App(cx: Scope) -> impl IntoView {
view! { cx,
<Router>
<Routes>
<Route path="/" view=move |cx| view! {cx,
<Home />
} />
</Routes>
</Router>
}
}

View file

@ -1,61 +1,12 @@
use leptos::*;
use melt_ui::*;
mod app;
mod demo_button;
mod demo_checkbox;
mod demo_modal;
mod demo_slider;
mod pages;
pub use demo_button::*;
pub use demo_checkbox::*;
pub use demo_modal::*;
pub use demo_slider::*;
#[component]
pub fn App(cx: Scope) -> impl IntoView {
let (theme, set_theme) = create_signal(cx, Theme::light());
provide_context(cx, theme);
let (count, set_count) = create_signal(cx, 0.0);
let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
let count_string = create_memo(cx, move |_| {
log!("sd");
count.get().to_string()
});
let on_input = SignalSetter::map(cx, move |value: String| {
set_count.set(value.parse().unwrap());
});
view! { cx,
<Space>
<Input value=count_string on_input=on_input/>
<Button
on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
type_=button_type
>
"theme"
</Button>
<Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>
"click"
</Button>
<Button
on:click=move |_| set_count.update(move |value| *value += 1.0)
type_=button_type
>
"click"
</Button>
{move || count.get()}
<Progress percentage=count/>
</Space>
<hr />
<DemoButton />
<hr />
<DemoModal/>
<hr />
<DemoCheckout />
<hr />
<DemoSlider />
}
}
use app::*;
use leptos::*;
fn main() {
mount_to_body(|cx| view! { cx, <App/> })

View file

@ -0,0 +1,53 @@
use crate::demo_button::*;
use crate::demo_checkbox::*;
use crate::demo_modal::*;
use crate::demo_slider::*;
use leptos::*;
use melt_ui::*;
#[component]
pub fn Home(cx: Scope) -> impl IntoView {
let (theme, set_theme) = create_signal(cx, Theme::light());
provide_context(cx, theme);
let (count, set_count) = create_signal(cx, 0.0);
let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
let count_string = create_memo(cx, move |_| {
log!("sd");
count.get().to_string()
});
let on_input = SignalSetter::map(cx, move |value: String| {
set_count.set(value.parse().unwrap());
});
view! { cx,
<Space>
<Input value=count_string on_input=on_input/>
<Button
on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
type_=button_type
>
"theme"
</Button>
<Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>
"click"
</Button>
<Button
on:click=move |_| set_count.update(move |value| *value += 1.0)
type_=button_type
>
"click"
</Button>
{move || count.get()}
<Progress percentage=count/>
</Space>
<hr />
<DemoButton />
<hr />
<DemoModal/>
<hr />
<DemoCheckout />
<hr />
<DemoSlider />
}
}

View file

@ -0,0 +1,3 @@
mod home;
pub use home::*;