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

feat(demo): theme

Browse source
This commit is contained in:
luoxiao 2023-10-31 17:39:01 +08:00
parent 8db136f0d5
commit c974f80ea5
4 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
demo/src/pages/home.rs
View file

@ -1,12 +1,26 @@
use leptos::*;
use leptos_router::{use_navigate, use_query_map};
use leptos_router::{use_navigate, use_query_map, Url};
use melt_ui::*;
#[component]
pub fn Home() -> impl IntoView {
let query_map = use_query_map().get_untracked();
// mobile page
if let Some(path) = query_map.get("path") {
let navigate = use_navigate();
if let Some((_, search)) = path.split_once("?") {
if let Some((key, value)) = search.split_once("=") {
if key == "theme" {
let theme = use_rw_theme();
let theme_name = theme.with_untracked(|theme| theme.name.clone());
if value == "light" && theme_name != "light" {
theme.set(Theme::light())
} else if value == "dark" && theme_name != "dark" {
theme.set(Theme::dark())
}
}
}
}
navigate(path, Default::default());
}
view! {

14
demo/src/pages/mobile.rs
View file

@ -1,12 +1,22 @@
use leptos::*;
use melt_ui::{use_theme, Theme};
#[component]
pub fn MobilePage(path: &'static str) -> impl IntoView {
let theme = use_theme(Theme::light);
let src = create_memo(move |_| theme.with(|theme| format!("{path}?theme={}", theme.name)));
let style = create_memo(move |_| {
theme.with(|theme| {
let mut style = String::from("margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; box-shadow: 0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03);");
style.push_str(&format!("border: 1px solid {}; ", theme.common.border_color));
style
})
});
view! {
<div style="height: 100vh; width: 400px; text-align: center">
<iframe
src=path
style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"
src=move || src.get()
style=move || style.get()
></iframe>
</div>
}

2
demo/src/pages/nav_bar/mod.rs
View file

@ -58,7 +58,7 @@ pub fn NavBarDemoPage() -> impl IntoView {
let on_click_right = move |_| click_text.set("right".to_string());
view! {
<div style="height: 100vh; background: #f5f5f5">
<div style="height: 100vh;">
<NavBar
title="Home"
left_arrow=true

2
demo/src/pages/tabbar/mod.rs
View file

@ -51,7 +51,7 @@ pub fn TabbarPage() -> impl IntoView {
pub fn TabbarDemoPage() -> impl IntoView {
let value = create_rw_signal(String::from("o"));
view! {
<div style="height: 100vh; background: #f5f5f5">
<div style="height: 100vh;">
{move || value.get()} <Tabbar value>
<TabbarItem key="a">"and"</TabbarItem>
<TabbarItem key="i">"if"</TabbarItem>