adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feat/button block (#135)

Browse source 
* feat: Button adds class block prop

* feat: ButtonGroup adds class prop
This commit is contained in:
luoxiaozero 2024-03-13 13:41:48 +08:00 • committed by GitHub
parent eecf86ccb1
commit c782fcd853
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
demo_markdown/docs/button/mod.md
View file

@ -136,6 +136,16 @@ view! {
}
```
### Block
```rust demo
view! {
<Space vertical=true>
<Button block=true>"Primary"</Button>
</Space>
}
```
### Group
```rust demo
@ -163,6 +173,7 @@ view! {
| style | `Option<MaybeSignal<String>>` | `Default::default()` | Button's style. |
| variant | `MaybeSignal<ButtonVariant>` | `ButtonVariant::Primary` | Button's variant. |
| color | `MaybeSignal<ButtonColor>` | `ButtonColor::Primary` | Button's color. |
| block | `MaybeSignal<bool>` | `false` | Whether the button is displayed as block. |
| round | `MaybeSignal<bool>` | `false` | Whether the button shows rounded corners. |
| circle | `MaybeSignal<bool>` | `false` | Whether the button is round. |
| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the button. |
@ -174,7 +185,8 @@ view! {
### ButtonGroup props
| Name | Type | Default | Description |
| -------- | ---------- | ------- | ----------------------------------- |
| vertical | `bool` | `false` | Directions of buttons in the group. |
| children | `Children` | | ButtonGroup's content. |
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the group element. |
| vertical | `bool` | `false` | Directions of buttons in the group. |
| children | `Children` | | ButtonGroup's content. |

5
thaw/src/button/button.css
View file

@ -21,6 +21,11 @@
transition: all 0.3s;
}
.thaw-button--block {
display: flex;
width: 100%;
}
.thaw-button--disabled:not(.thaw-button--text, .thaw-button--link) {
border-color: var(--thaw-border-color-disabled);
background-color: var(--thaw-background-color-disabled);

10
thaw/src/button/button_group.rs
View file

@ -1,11 +1,15 @@
use crate::utils::mount_style;
use crate::utils::{class_list::class_list, mount_style, OptionalProp};
use leptos::*;
#[component]
pub fn ButtonGroup(#[prop(optional)] vertical: bool, children: Children) -> impl IntoView {
pub fn ButtonGroup(
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional)] vertical: bool,
children: Children,
) -> impl IntoView {
mount_style("button-group", include_str!("./button-group.css"));
view! {
<div class="thaw-button-group" class=("thaw-button-group--vertical", vertical)>
<div class=class_list!["thaw-button-group", class.map(| c | move || c.get())] class=("thaw-button-group--vertical", vertical)>
{children()}
</div>
}

3
thaw/src/button/mod.rs
View file

@ -102,6 +102,7 @@ pub fn Button(
#[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] size: MaybeSignal<ButtonSize>,
#[prop(optional, into)] block: MaybeSignal<bool>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] circle: MaybeSignal<bool>,
#[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
@ -228,7 +229,7 @@ pub fn Button(
ButtonVariant::Text), ("thaw-button--link", move || variant.get() ==
ButtonVariant::Link), ("thaw-button--round", move || round.get()),
("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||
disabled.get()), class.map(| c | move || c.get())
disabled.get()), ("thaw-button--block", move || block.get()), class.map(| c | move || c.get())
]
style=move || {