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 loading prop

Browse source
This commit is contained in:
luoxiao 2023-10-05 11:06:43 +08:00
parent 1bab2ca4cb
commit 9d824b2676
4 changed files with 55 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Cargo.toml
View file

@ -22,6 +22,7 @@ icondata = { version = "0.0.7", features = [
"AiCloseOutlined",
"AiCheckOutlined",
"AiLeftOutlined",
"AiLoadingOutlined",
] }
[workspace]

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

@ -92,6 +92,7 @@ pub fn ButtonPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<LoadingButton />
<h3>"style"</h3>
<Demo>
<Space>
@ -108,3 +109,32 @@ pub fn ButtonPage() -> impl IntoView {
</div>
}
}
#[component]
pub fn LoadingButton() -> impl IntoView {
let loading = create_rw_signal(false);
view! {
<h3>"loading"</h3>
<Demo>
<Space>
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined on:click=move |_| loading.set(true)>
"ERROR Color Icon"
</Button>
<Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
let loading = create_rw_signal(false);
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>
}
"#, "rust")>
""
</DemoCode>
</Demo>
}
}

6
src/button/button.css
View file

@ -43,3 +43,9 @@
padding: 0 10px;
border-radius: 50%;
}
@keyframes meltLoadingCircle {
100% {
transform: rotate(360deg);
}
}

19
src/button/mod.rs
View file

@ -57,6 +57,7 @@ pub fn Button(
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<Icon>,
#[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional)] children: Option<ChildrenFn>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -89,7 +90,7 @@ pub fn Button(
""
};
view! { class=class_name,
view! {class=class_name,
<button
class:melt-button=true
class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
@ -97,9 +98,21 @@ pub fn Button(
class=("melt-button--round", move || round.get())
style=move || format!("{}{}", css_vars.get(), style.get())
>
<OptionComp value=icon let:icon>
{
move || {
if loading.get() {
view! {
<Icon icon=Icon::from(AiIcon::AiLoadingOutlined) style=format!("animation: meltLoadingCircle 1s infinite linear;{icon_style}")/>
}.into()
} else if let Some(icon) = icon {
view! {
<Icon icon=icon style=icon_style/>
</OptionComp>
}.into()
} else {
None
}
}
}
<OptionComp value=children let:children>
{ children() }
</OptionComp>