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

docs: theme

Browse source
This commit is contained in:
luoxiao 2023-11-17 23:12:31 +08:00
parent 02e56c0f25
commit 50c71422ae
5 changed files with 152 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/app.rs
View file

@ -22,7 +22,6 @@ pub fn App() -> impl IntoView {
});
let theme = create_rw_signal(theme);
provide_context(theme);
provide_meta_context();
view! {
<Provider theme>
@ -84,6 +83,7 @@ fn TheRouter() -> impl IntoView {
<Route path="/breadcrumb" view=BreadcrumbPage/>
<Route path="/layout" view=LayoutPage/>
<Route path="/progress" view=ProgressPage/>
<Route path="/theme" view=ThemePage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>

7
demo/src/pages/components.rs
View file

@ -232,6 +232,13 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
},
],
},
MenuGroupOption {
label: "Config Components".into(),
children: vec![MenuItemOption {
value: "theme".into(),
label: "Theme".into(),
}],
},
MenuGroupOption {
label: "Mobile Components".into(),
children: vec![

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

@ -34,6 +34,7 @@ mod tabbar;
mod table;
mod tabs;
mod tag;
mod theme;
mod toast;
mod upload;
@ -73,5 +74,6 @@ pub use tabbar::*;
pub use table::*;
pub use tabs::*;
pub use tag::*;
pub use theme::*;
pub use toast::*;
pub use upload::*;

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

@ -8,7 +8,7 @@ pub fn TabsPage() -> impl IntoView {
let value = create_rw_signal(String::from("apple"));
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Tabs2"</h1>
<h1>"Tabs"</h1>
<Demo>
<Tabs value>
<Tab key="apple" label="Apple">

141
demo/src/pages/theme/mod.rs Normal file
View file

@ -0,0 +1,141 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ThemePage() -> impl IntoView {
let customize_theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| {
customize_theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
});
};
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Theme"</h1>
<ThemeProviderPage/>
<h3>"GlobalStyle"</h3>
<p>"You can use GlobalStyle to sync common global style to the body element."</p>
<Demo>
""
<DemoCode
slot
html=highlight_str!(
r#"
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<GlobalStyle />
"..."
</ThemeProvider>
}
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<h3>"CustomizeTheme"</h3>
<Demo>
<ThemeProvider theme=customize_theme>
<Card>
<Space>
<Button on_click=move |_| {
customize_theme.set(Theme::light())
}>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
<DemoCode
slot
html=highlight_str!(
r##"
let customize_theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| {
customize_theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
});
};
view! {
<ThemeProvider theme=customize_theme>
<Card>
<Space>
<Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
}
"##,
"rust"
)
>
""
</DemoCode>
</Demo>
<h3>"ThemeProvider Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"theme"</td>
<td>"RwSignal<Theme>"</td>
<td></td>
<td>"Theme."</td>
</tr>
</tbody>
</Table>
</div>
}
}
#[component]
fn ThemeProviderPage() -> impl IntoView {
view! {
<h3>"ThemeProvider"</h3>
<Demo>
""
<DemoCode
slot
html=highlight_str!(
r#"
let theme = create_rw_signal(Theme::light());
view! {
<ThemeProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space>
</Card>
</ThemeProvider>
}
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
}
}