yew_bootstrap/component/card/
image.rs

1use yew::prelude::*;
2
3/// Controls the display variant used for a [CardImage]
4#[derive(Copy, Clone, Debug, PartialEq, Eq)]
5pub enum ImageVariant {
6    /// Default display. Nothing special.
7    Default,
8    /// Image at the top of a card.
9    Top,
10    /// Image at the bottom of a card.
11    Bottom,
12}
13
14/// # Properties of [CardImage]
15#[derive(Properties, Debug, PartialEq)]
16pub struct CardImageProps {
17    /// The display variant to use. See [ImageVariant] for more details.
18    #[prop_or(ImageVariant::Default)]
19    pub variant: ImageVariant,
20    /// Extra CSS classes to include, in addition to the defaults.
21    #[prop_or_default]
22    pub class: Classes,
23    /// The image source to use. Passed directly to the `src` property of the generated `img`.
24    pub src: AttrValue,
25    /// Descriptive text for screen reader users.
26    #[prop_or_default]
27    pub alt: AttrValue,
28}
29
30/// # Card Image component
31/// An image contained within a [Card](super::Card). Can be styled to match with being on the top
32/// or bottom using [ImageVariant].
33///
34/// See [CardImageProps] for a list of properties.
35#[function_component]
36pub fn CardImage(props: &CardImageProps) -> Html {
37    let mut classes = match props.variant {
38        ImageVariant::Default => Classes::from("card-img"),
39        ImageVariant::Top => Classes::from("card-img-top"),
40        ImageVariant::Bottom => Classes::from("card-img-bottom"),
41    };
42
43    classes.extend(&props.class);
44
45    html! {
46        <img class={classes} data-src={props.src.clone()} style="height: 180px; width: 100%; display: block;" alt={props.alt.clone()} />
47    }
48}
49
50/// # Properties of [CardImageOverlay]
51#[derive(Properties, Debug, PartialEq)]
52pub struct CardImageOverlayProps {
53    /// Inner components (displayed in the [CardImageOverlay])
54    #[prop_or_default]
55    pub children: Children,
56    /// Extra CSS classes to include, in addition to the defaults.
57    #[prop_or_default]
58    pub class: Classes,
59}
60
61/// # Card Image Overlay component
62/// Used in combination with a [CardImage] to create content overlayed on an image.
63///
64/// See [CardImageOverlayProps] for a list of properties.
65///
66/// ## Examples
67///
68/// ```
69/// use yew::prelude::*;
70/// use yew_bootstrap::component::card::*;
71/// fn test() -> Html {
72///   html! {
73///     <Card>
74///         <CardImage variant={ImageVariant::Top} src="imgsrc.jpg" />
75///         <CardImageOverlay>{"Text on top of image"}</CardImageOverlay>
76///     </Card>
77///   }
78/// }
79/// ```
80#[function_component]
81pub fn CardImageOverlay(props: &CardImageOverlayProps) -> Html {
82    let mut classes = props.class.clone();
83    classes.push("card-img-overlay");
84
85    html! {
86        <div class={classes}>
87            {props.children.clone()}
88        </div>
89    }
90}
yew_bootstrap/component/card/image.rs

yew_bootstrap/component/card/
image.rs
