yew_bootstrap/component/
button_group.rs

1use yew::prelude::*;
2
3/// # Button group
4/// [ButtonGroup] is used to group several [crate::component::Button] instances together.
5/// Buttons can be arranged vertically.
6/// 
7/// See [ButtonGroupProps] for a listing of properties.
8/// 
9/// ## Example
10/// Example of a simple button group:
11/// 
12/// ```rust
13/// use yew::prelude::*;
14/// use yew_bootstrap::component::{Button, ButtonGroup};
15/// use yew_bootstrap::util::Color;
16/// fn test() -> Html {
17///     html!{
18///         <ButtonGroup class={ "class" }>
19///             <Button style={Color::Primary} text={ "First button" }/>
20///             <Button style={Color::Secondary} text={ "Second button" }/>
21///         </ButtonGroup>
22///     }
23/// }
24/// ```
25pub struct ButtonGroup {}
26
27/// Properties for [ButtonGroup]
28#[derive(Properties, Clone, PartialEq)]
29pub struct ButtonGroupProps {
30    /// CSS class
31    #[prop_or_default]
32    pub class: String,
33
34    /// Children for the group (Button instances)
35    #[prop_or_default]
36    pub children: Children,
37
38    /// Aria label used for assistive technologies
39    #[prop_or_default]
40    pub label: String,
41
42    /// Role, used for assistive technoligies to describe the purpose of the group.
43    #[prop_or_default]
44    pub role: String,
45
46    /// If true, disposition is vertical (Default horizontal)
47    #[prop_or_default]
48    pub vertical: bool,
49}
50
51impl Component for ButtonGroup {
52    type Message = ();
53    type Properties = ButtonGroupProps;
54
55    fn create(_ctx: &Context<Self>) -> Self {
56        Self {}
57    }
58
59    fn view(&self, ctx: &Context<Self>) -> Html {
60        let props = ctx.props();
61        let mut classes = Classes::new();
62        if props.vertical {
63            classes.push("btn-group-vertical");
64        } else {
65            classes.push("btn-group");
66        }
67        classes.push(props.class.clone());
68
69        html! {
70            <div
71                class={classes}
72                role={props.role.clone()}
73                aria-label={props.label.clone()}
74            >
75                { for props.children.iter() }
76            </div>
77        }
78    }
79}
yew_bootstrap/component/button_group.rs

yew_bootstrap/component/
button_group.rs
