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

6
src/button/button.css
View file

@ -69,6 +69,12 @@
border-radius: var(--thaw-height); 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 { @keyframes thawLoadingCircle {
100% { 100% {
transform: rotate(360deg); 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)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] size: MaybeSignal<ButtonSize>, #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
#[prop(optional, into)] round: MaybeSignal<bool>, #[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] circle: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<Icon>, #[prop(optional, into)] icon: Option<Icon>,
#[prop(optional, into)] loading: MaybeSignal<bool>, #[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional, into)] disabled: 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--text", move || variant.get() == ButtonVariant::Text)
class=("thaw-button--link", move || variant.get() == ButtonVariant::Link) class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
class=("thaw-button--round", move || round.get()) class=("thaw-button--round", move || round.get())
class=("thaw-button--circle", move || circle.get())
class=("thaw-button--disabled", move || disabled.get()) class=("thaw-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get()) style=move || format!("{}{}", css_vars.get(), style.get())
disabled=move || disabled.get() disabled=move || disabled.get()