mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
✨ feat(example): add leptos_router
This commit is contained in:
parent
e0c21b5f28
commit
0c34929119
5 changed files with 78 additions and 54 deletions
|
@ -9,3 +9,4 @@ edition = "2021"
|
||||||
leptos = { version = "0.3.0", features = ["stable"] }
|
leptos = { version = "0.3.0", features = ["stable"] }
|
||||||
melt-ui = { path = "../../" }
|
melt-ui = { path = "../../" }
|
||||||
leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
|
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
16
examples/basic/src/app.rs
Normal 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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,61 +1,12 @@
|
||||||
use leptos::*;
|
mod app;
|
||||||
use melt_ui::*;
|
|
||||||
mod demo_button;
|
mod demo_button;
|
||||||
mod demo_checkbox;
|
mod demo_checkbox;
|
||||||
mod demo_modal;
|
mod demo_modal;
|
||||||
mod demo_slider;
|
mod demo_slider;
|
||||||
|
mod pages;
|
||||||
|
|
||||||
pub use demo_button::*;
|
use app::*;
|
||||||
pub use demo_checkbox::*;
|
use leptos::*;
|
||||||
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 />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
mount_to_body(|cx| view! { cx, <App/> })
|
mount_to_body(|cx| view! { cx, <App/> })
|
||||||
|
|
53
examples/basic/src/pages/home.rs
Normal file
53
examples/basic/src/pages/home.rs
Normal 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 />
|
||||||
|
}
|
||||||
|
}
|
3
examples/basic/src/pages/mod.rs
Normal file
3
examples/basic/src/pages/mod.rs
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
mod home;
|
||||||
|
|
||||||
|
pub use home::*;
|
Loading…
Add table
Reference in a new issue