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: button component ameliorate

Browse source
This commit is contained in:
luoxiao 2023-04-12 12:47:31 +08:00
parent 4a1c9a6bd1
commit 12dc04d2e4
5 changed files with 75 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/basic/Trunk.toml
View file

@ -3,7 +3,8 @@ target = "index.html"
[watch]
watch = [
"../../src"
"../../src",
"./src"
]
[serve]

31
examples/basic/src/demo_button.rs Normal file
View file

@ -0,0 +1,31 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn DemoButton(cx: Scope) -> impl IntoView {
view! {cx,
<Space>
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
</Space>
}
}

17
examples/basic/src/main.rs
View file

@ -1,19 +1,17 @@
use leptos::*;
use melt_ui::*;
mod demo_button;
mod demo_modal;
pub use demo_button::*;
pub use demo_modal::*;
fn main() {
mount_to_body(|cx| view! { cx, <App/> })
}
#[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()
@ -40,9 +38,16 @@ pub fn App(cx: Scope) -> impl IntoView {
"click"
</Button>
{move || count.get()}
<DemoModal/>
<Progress percentage=count/>
</Space>
<hr />
<DemoButton />
<hr />
<DemoModal/>
}
}
fn main() {
mount_to_body(|cx| view! { cx, <App/> })
}

9
src/button/button.css
View file

@ -1,15 +1,16 @@
.melt-button {
height: 34px;
padding: 0 16px;
background-color: #0000;
border: 1px solid #555a;
background-color: var(--background-color);
color: var(--font-color);
border: 1px solid var(--border-color);
border-radius: 5px;
cursor: pointer;
}
.melt-button:hover {
transition: all 0.3s;
border-color: #555;
border-color: var(--border-color-hover);
}
.melt-button--text {
@ -17,5 +18,5 @@
}
.melt-button--text:hover {
color: #4af;
color: var(--font-color-hover);
}

38
src/button/mod.rs
View file

@ -18,7 +18,7 @@ pub enum ButtonColor {
PRIMARY,
SUCCESS,
WARNING,
Error,
ERROR,
}
impl ButtonColor {
@ -27,7 +27,7 @@ impl ButtonColor {
ButtonColor::PRIMARY => theme.common.color_primary.clone(),
ButtonColor::SUCCESS => theme.common.color_success.clone(),
ButtonColor::WARNING => theme.common.color_warning.clone(),
ButtonColor::Error => theme.common.color_error.clone(),
ButtonColor::ERROR => theme.common.color_error.clone(),
}
}
}
@ -40,19 +40,33 @@ pub fn Button(
children: Children,
) -> impl IntoView {
let theme = use_theme(cx, Theme::light);
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);
css_vars.push_str(&format!("--background-color: {bg_color}"));
css_vars
});
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;"));
}
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)
<button
class:melt-button=true
class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
style=move || css_vars.get()
>
{children(cx)}