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 a circle property

Browse source
This commit is contained in:
luoxiao 2023-12-11 16:33:50 +08:00
parent e9778b6008
commit 9d1e808627
3 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
demo/src/pages/button/mod.rs
View file

@ -67,7 +67,7 @@ pub fn ButtonPage() -> impl IntoView {
</DemoCode>
</Demo>
<h3>"icon"</h3>
<h3>"Icon"</h3>
<Demo>
<Space>
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
@ -78,6 +78,11 @@ pub fn ButtonPage() -> impl IntoView {
icon=icondata::AiIcon::AiCloseOutlined
round=true
/>
<Button
color=ButtonColor::Error
icon=icondata::AiIcon::AiCloseOutlined
circle=true
/>
</Space>
<DemoCode slot>
@ -88,6 +93,11 @@ pub fn ButtonPage() -> impl IntoView {
</Button>
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
<Button
color=ButtonColor::Error
icon=icondata::AiIcon::AiCloseOutlined
circle=true
/>
"#,
"rust"
)}
@ -282,6 +292,16 @@ pub fn ButtonPage() -> impl IntoView {
</td>
<td>"Whether the button shows rounded corners."</td>
</tr>
<tr>
<td>"circle"</td>
<td>
<Text code=true>"MaybeSignal<bool>"</Text>
</td>
<td>
<Text code=true>"false"</Text>
</td>
<td>"Whether the button is round."</td>
</tr>
<tr>
<td>"icon"</td>
<td>

6
src/button/button.css
View file

@ -69,6 +69,12 @@
border-radius: var(--thaw-height);
}
.thaw-button--circle:not(.thaw-button--link) {
width: var(--thaw-height);
padding: 0;
border-radius: var(--thaw-height);
}
@keyframes thawLoadingCircle {
100% {
transform: rotate(360deg);

2
src/button/mod.rs
View file

@ -102,6 +102,7 @@ pub fn Button(
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] size: MaybeSignal<ButtonSize>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] circle: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<Icon>,
#[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
@ -225,6 +226,7 @@ pub fn Button(
class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
class=("thaw-button--round", move || round.get())
class=("thaw-button--circle", move || circle.get())
class=("thaw-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get())
disabled=move || disabled.get()