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

feat: add button component on_click prop

Browse source
This commit is contained in:
luoxiao 2023-10-05 11:52:18 +08:00
parent 9d824b2676
commit 5db0b60d6c
3 changed files with 57 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
gh-pages/src/pages/button/mod.rs
View file

@ -113,24 +113,46 @@ pub fn ButtonPage() -> impl IntoView {
#[component]
pub fn LoadingButton() -> impl IntoView {
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
set_timeout(
move || {
loading.set(false);
},
std::time::Duration::new(2, 0),
);
};
view! {
<h3>"loading"</h3>
<h3>"Loading"</h3>
<Demo>
<Space>
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined on:click=move |_| loading.set(true)>
"ERROR Color Icon"
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
"Click Me"
</Button>
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
<Button loading on_click>
"Click Me"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
set_timeout(
move || {
loading.set(false);
},
std::time::Duration::new(2, 0),
);
};
view! {
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
<Space>
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
"Click Me"
</Button>
<Button loading on_click>
"Click Me"
</Button>
</Space>
}
"#, "rust")>
""

7
src/button/button.css
View file

@ -5,7 +5,6 @@
color: var(--font-color);
border: 1px solid var(--border-color);
border-radius: 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
@ -14,12 +13,14 @@
}
.melt-button:hover {
transition: all 0.3s;
border-color: var(--border-color-hover);
background-color: var(--background-color-hover);
cursor: pointer;
transition: all 0.3s;
}
.melt-button:active {
.melt-button:active:not(.melt-button--disabled) {
transition: all 0.3s;
border-color: var(--border-color-hover);
background-color: var(--background-color-active);

22
src/button/mod.rs
View file

@ -58,6 +58,8 @@ pub fn Button(
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<Icon>,
#[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
#[prop(optional)] children: Option<ChildrenFn>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -90,13 +92,33 @@ pub fn Button(
""
};
let disabled = create_memo(move |_| {
if loading.get() {
return true;
}
disabled.get()
});
let on_click = move |event| {
if disabled.get() {
return;
}
let Some(callback) = on_click.as_ref() else {
return;
};
callback.call(event);
};
view! {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)
class=("melt-button--round", move || round.get())
class=("melt-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get())
on:click=on_click
>
{
move || {