yew_bootstrap/component/card/
card.rs

1use yew::prelude::*;
2use crate::util::{Color, TextColor};
3use crate::component::card::CardBody;
4
5/// # Properties of [Card]
6#[derive(Properties, Clone, PartialEq)]
7pub struct CardProps {
8    /// Inner components (displayed in the [Card])
9    #[prop_or_default]
10    pub children: Children,
11    /// Extra CSS classes to include, in addition to the defaults.
12    #[prop_or_default]
13    pub class: Classes,
14    /// Color style.
15    #[prop_or_default]
16    pub bg: Option<Color>,
17    /// Text color style.
18    #[prop_or_default]
19    pub text: Option<TextColor>,
20    /// Border color style.
21    #[prop_or_default]
22    pub border: Option<Color>,
23    /// If true, implicitly wraps children in a [CardBody].
24    #[prop_or_default]
25    pub body: bool,
26}
27
28/// # Card component
29/// Container for a Card, a component generally used for dynamic display of items in a grid pattern.
30/// Takes any item as child, but most often [body](super::body) items, [image](super::image) items,
31/// or a flush [ListGroup](crate::component::ListGroup).
32///
33/// See [CardProps] for a list of properties.
34///
35/// ## Examples
36///
37/// With header and footer text:
38/// ```
39/// use yew::prelude::*;
40/// use yew_bootstrap::component::card::*;
41/// fn test() -> Html {
42///   html! {
43///     <Card>
44///         <CardHeader>{"Card Head"}</CardHeader>
45///         <CardBody>{"Body text"}</CardBody>
46///         <CardFooter>{"Card Foot"}</CardFooter>
47///     </Card>
48///   }
49/// }
50/// ```
51///
52/// With a top image and image description, instead:
53/// ```
54/// use yew::prelude::*;
55/// use yew_bootstrap::component::card::*;
56/// fn test() -> Html {
57///   html! {
58///     <Card>
59///         <CardImage variant={ImageVariant::Top} src="imgsrc.jpg"/>
60///         <CardBody>{"Image description"}</CardBody>
61///     </Card>
62///   }
63/// }
64/// ```
65///
66/// Setting the `body` property, everything is implicitly wrapped in a [CardBody]:
67/// ```
68/// use yew::prelude::*;
69/// use yew_bootstrap::component::card::*;
70/// fn test() -> Html {
71///   html! {
72///     <Card body=true>
73///         {"Body text, great for simple cards"}
74///     </Card>
75///   }
76/// }
77/// ```
78#[function_component]
79pub fn Card(props: &CardProps) -> Html {
80    let mut classes = props.class.clone();
81    classes.push("card");
82    if let Some(color) = &props.bg {
83        classes.push(format!("bg-{}", color));
84    }
85    if let Some(color) = &props.text {
86        classes.push(format!("text-{}", color));
87    }
88    if let Some(color) = &props.border {
89        classes.push(format!("border-{}", color));
90    }
91
92    html! {
93        <div class={classes}>
94            if props.body {
95                <CardBody>{ props.children.clone() }</CardBody>
96            } else {
97                { props.children.clone() }
98            }
99        </div>
100    }
101}
yew_bootstrap/component/card/card.rs

yew_bootstrap/component/card/
card.rs
