yew_bootstrap/component/card/
card_group.rs

1use yew::prelude::*;
2use crate::component::card::Card;
3
4/// # Properties of [CardGroup]
5#[derive(Properties, Debug, PartialEq)]
6pub struct CardGroupProps {
7    /// Inner cards (displayed in the [CardGroup])
8    #[prop_or_default]
9    pub children: ChildrenWithProps<Card>,
10    /// Extra CSS classes to include, in addition to the defaults.
11    #[prop_or_default]
12    pub class: Classes,
13}
14
15/// # Card Group component
16/// Grouping container for [Card]s. Displays them directly connected, in a grid layout.
17///
18/// See [CardGroupProps] for a list of properties.
19///
20/// ## Examples
21///
22/// ```
23/// use yew::prelude::*;
24/// use yew_bootstrap::component::card::*;
25/// fn test() -> Html {
26///   html! {
27///     <CardGroup>
28///         <Card body=true>{"Card 1"}</Card>
29///         <Card body=true>{"Card 2"}</Card>
30///         <Card body=true>{"Card 3"}</Card>
31///         <Card body=true>{"Card 4"}</Card>
32///     </CardGroup>
33///   }
34/// }
35/// ```
36#[function_component]
37pub fn CardGroup(props: &CardGroupProps) -> Html {
38    let mut classes = props.class.clone();
39    classes.push("card-group");
40
41    html! {
42        <div class={classes}>
43            { for props.children.iter() }
44        </div>
45    }
46}