impulse_thaw/image/
mod.rs

1use leptos::prelude::*;
2use thaw_utils::{class_list, mount_style};
3
4#[component]
5pub fn Image(
6    #[prop(optional, into)] class: MaybeProp<String>,
7    /// path to the image you want to display.
8    #[prop(optional, into)]
9    src: MaybeProp<String>,
10    /// description of the image, which isn't mandatory but is incredibly useful for accessibility.
11    #[prop(optional, into)]
12    alt: MaybeProp<String>,
13    /// Image width.
14    #[prop(optional, into)]
15    width: MaybeProp<String>,
16    /// Image height.
17    #[prop(optional, into)]
18    height: MaybeProp<String>,
19    /// An image can appear square, circular, or rounded.
20    #[prop(optional, into)]
21    shape: Signal<ImageShape>,
22    /// An image can take up the width of its container.
23    #[prop(optional, into)]
24    block: Signal<bool>,
25    /// An image can appear elevated with shadow.
26    #[prop(optional, into)]
27    shadow: Signal<bool>,
28    /// An image can set how it should be resized to fit its container.
29    #[prop(optional, into)]
30    fit: Signal<ImageFit>,
31) -> impl IntoView {
32    mount_style("image", include_str!("./image.css"));
33
34    view! {
35        <img
36            class=class_list![
37                "thaw-image",
38                ("thaw-image--block", move || block.get()),
39                ("thaw-image--shadow", move || shadow.get()),
40                move || format!("thaw-image--{}", shape.get().as_str()),
41                move || format!("thaw-image--fit-{}", fit.get().as_str()),
42                class
43            ]
44            src=move || src.get()
45            alt=move || alt.get()
46            width=move || width.get()
47            height=move || height.get()
48        />
49    }
50}
51
52#[derive(Default, Clone)]
53pub enum ImageShape {
54    Circular,
55    Rounded,
56    #[default]
57    Square,
58}
59
60impl ImageShape {
61    pub fn as_str(&self) -> &'static str {
62        match self {
63            ImageShape::Circular => "circular",
64            ImageShape::Rounded => "rounded",
65            ImageShape::Square => "square",
66        }
67    }
68}
69
70#[derive(Default, Clone)]
71pub enum ImageFit {
72    None,
73    Contain,
74    Cover,
75    #[default]
76    Fill,
77    ScaleDown,
78}
79
80impl ImageFit {
81    pub fn as_str(&self) -> &'static str {
82        match self {
83            ImageFit::None => "none",
84            ImageFit::Contain => "contain",
85            ImageFit::Cover => "cover",
86            ImageFit::Fill => "fill",
87            ImageFit::ScaleDown => "scale-down",
88        }
89    }
90}
impulse_thaw/image/mod.rs

impulse_thaw/image/
mod.rs
