diff --git a/demo_markdown/docs/button/mod.md b/demo_markdown/docs/button/mod.md index 54e5019..55728eb 100644 --- a/demo_markdown/docs/button/mod.md +++ b/demo_markdown/docs/button/mod.md @@ -136,6 +136,16 @@ view! { } ``` +### Block + +```rust demo +view! { + + + +} +``` + ### Group ```rust demo @@ -163,6 +173,7 @@ view! { | style | `Option>` | `Default::default()` | Button's style. | | variant | `MaybeSignal` | `ButtonVariant::Primary` | Button's variant. | | color | `MaybeSignal` | `ButtonColor::Primary` | Button's color. | +| block | `MaybeSignal` | `false` | Whether the button is displayed as block. | | round | `MaybeSignal` | `false` | Whether the button shows rounded corners. | | circle | `MaybeSignal` | `false` | Whether the button is round. | | icon | `OptionalMaybeSignal` | `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>` | `Default::default()` | Additional classes for the group element. | +| vertical | `bool` | `false` | Directions of buttons in the group. | +| children | `Children` | | ButtonGroup's content. | diff --git a/thaw/src/button/button.css b/thaw/src/button/button.css index 4afa9f1..8801c42 100644 --- a/thaw/src/button/button.css +++ b/thaw/src/button/button.css @@ -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); diff --git a/thaw/src/button/button_group.rs b/thaw/src/button/button_group.rs index c116f9c..28f4235 100644 --- a/thaw/src/button/button_group.rs +++ b/thaw/src/button/button_group.rs @@ -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>, + #[prop(optional)] vertical: bool, + children: Children, +) -> impl IntoView { mount_style("button-group", include_str!("./button-group.css")); view! { -
+
{children()}
} diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs index 180bb19..08d1bef 100644 --- a/thaw/src/button/mod.rs +++ b/thaw/src/button/mod.rs @@ -102,6 +102,7 @@ pub fn Button( #[prop(optional, into)] variant: MaybeSignal, #[prop(optional, into)] color: MaybeSignal, #[prop(optional, into)] size: MaybeSignal, + #[prop(optional, into)] block: MaybeSignal, #[prop(optional, into)] round: MaybeSignal, #[prop(optional, into)] circle: MaybeSignal, #[prop(optional, into)] icon: OptionalMaybeSignal, @@ -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 || {