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: 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>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>

8
src/button/button.css
View file

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