adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: add button type

Browse source
This commit is contained in:
luoxiao 2023-04-12 17:48:11 +08:00
parent 12dc04d2e4
commit c51f220ed0
3 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/basic/src/demo_button.rs
View file

@ -14,6 +14,9 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
<Button type_=ButtonType::TEXT> <Button type_=ButtonType::TEXT>
"TEXT" "TEXT"
</Button> </Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>
"PRIMARY Color" "PRIMARY Color"
</Button> </Button>

8
src/button/button.css
View file

@ -13,10 +13,16 @@
border-color: var(--border-color-hover); border-color: var(--border-color-hover);
} }
.melt-button--text { .melt-button--text,
.melt-button--link {
border: none; border: none;
} }
.melt-button--text:hover { .melt-button--text:hover {
color: var(--font-color-hover); color: var(--font-color-hover);
background-color: #f2f2f2;
}
.melt-button--link:hover {
color: var(--font-color-hover);
} }

40
src/button/mod.rs
View file

@ -4,12 +4,13 @@ use leptos::*;
use stylers::style_sheet_str; use stylers::style_sheet_str;
pub use theme::ButtonTheme; pub use theme::ButtonTheme;
#[derive(Default, PartialEq, Clone)] #[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonType { pub enum ButtonType {
#[default] #[default]
PRIMARY, PRIMARY,
SOLID, SOLID,
TEXT, TEXT,
LINK,
} }
#[derive(Default, Clone)] #[derive(Default, Clone)]
@ -40,33 +41,30 @@ pub fn Button(
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
let theme = use_theme(cx, Theme::light); let theme = use_theme(cx, Theme::light);
let css_vars; let css_vars = create_memo(cx, move |_| {
{ let mut css_vars = String::new();
let type_ = type_.clone().get(); let theme = theme.get();
css_vars = create_memo(cx, move |_| { let bg_color = color.get().theme_color(&theme);
let mut css_vars = String::new(); if type_.get() == ButtonType::PRIMARY {
let theme = theme.get(); css_vars.push_str(&format!("--background-color: {bg_color};"));
let bg_color = color.get().theme_color(&theme); css_vars.push_str(&format!("--font-color: #fff;"));
if type_ == ButtonType::PRIMARY { css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--background-color: {bg_color};")); css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--font-color: #fff;")); } else {
css_vars.push_str(&format!("--border-color: {bg_color};")); css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};")); css_vars.push_str(&format!("--border-color: #555a;"));
} else { css_vars.push_str(&format!("--border-color-hover: #555;"));
css_vars.push_str(&format!("--font-color-hover: {bg_color};")); }
css_vars.push_str(&format!("--border-color: #555a;"));
css_vars.push_str(&format!("--border-color-hover: #555;"));
}
css_vars css_vars
}); });
}
let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css")); let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
view! {cx, class=class_name, view! {cx, class=class_name,
<button <button
class:melt-button=true class:melt-button=true
class=("melt-button--text", move || type_.get() == ButtonType::TEXT) class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
class=("melt-button--link", move || type_.get() == ButtonType::LINK)
style=move || css_vars.get() style=move || css_vars.get()
> >
{children(cx)} {children(cx)}