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 add round

Browse source
This commit is contained in:
luoxiao 2023-05-08 23:53:54 +08:00
parent 51bae90332
commit 60a1f589f5
3 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,6 +32,8 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
}
}

5
src/button/button.css
View file

@ -31,3 +31,8 @@
.melt-button--link:hover {
color: var(--font-color-hover);
}
.melt-button--round {
padding: 0 10px;
border-radius: 50%;
}

20
src/button/mod.rs
View file

@ -39,8 +39,9 @@ pub fn Button(
cx: Scope,
#[prop(optional, into)] type_: MaybeSignal<ButtonType>,
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<leptos_icons::Icon>,
children: Children,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
let theme = use_theme(cx, Theme::light);
let css_vars = create_memo(cx, move |_| {
@ -62,23 +63,36 @@ pub fn Button(
});
let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
let icon_style= if children.is_some() {
"margin-right: 6px"
} else {
""
};
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)
class=("melt-button--round", move || round.get())
style=move || css_vars.get()
>
{
if let Some(icon) = icon {
view!{cx,
<LeptosIcon icon=icon style="margin-right: 6px"/>
<LeptosIcon icon=icon style=icon_style/>
}.into()
} else {
None
}
}
{children(cx)}
{
if let Some(children) = children {
children(cx).into()
} else {
None
}
}
</button>
}
}