dioxus_bulma/components/
image.rs1use dioxus::prelude::*;
2use crate::utils::build_class;
3
4#[derive(Debug, Clone, Copy, PartialEq)]
5pub enum ImageSize {
6 Is16x16,
7 Is24x24,
8 Is32x32,
9 Is48x48,
10 Is64x64,
11 Is96x96,
12 Is128x128,
13 IsSquare,
14 Is1by1,
15 Is5by4,
16 Is4by3,
17 Is3by2,
18 Is5by3,
19 Is16by9,
20 Is2by1,
21 Is3by1,
22 Is4by5,
23 Is3by4,
24 Is2by3,
25 Is3by5,
26 Is9by16,
27 Is1by2,
28 Is1by3,
29}
30
31impl ImageSize {
32 pub fn as_str(&self) -> &'static str {
33 match self {
34 ImageSize::Is16x16 => "is-16x16",
35 ImageSize::Is24x24 => "is-24x24",
36 ImageSize::Is32x32 => "is-32x32",
37 ImageSize::Is48x48 => "is-48x48",
38 ImageSize::Is64x64 => "is-64x64",
39 ImageSize::Is96x96 => "is-96x96",
40 ImageSize::Is128x128 => "is-128x128",
41 ImageSize::IsSquare => "is-square",
42 ImageSize::Is1by1 => "is-1by1",
43 ImageSize::Is5by4 => "is-5by4",
44 ImageSize::Is4by3 => "is-4by3",
45 ImageSize::Is3by2 => "is-3by2",
46 ImageSize::Is5by3 => "is-5by3",
47 ImageSize::Is16by9 => "is-16by9",
48 ImageSize::Is2by1 => "is-2by1",
49 ImageSize::Is3by1 => "is-3by1",
50 ImageSize::Is4by5 => "is-4by5",
51 ImageSize::Is3by4 => "is-3by4",
52 ImageSize::Is2by3 => "is-2by3",
53 ImageSize::Is3by5 => "is-3by5",
54 ImageSize::Is9by16 => "is-9by16",
55 ImageSize::Is1by2 => "is-1by2",
56 ImageSize::Is1by3 => "is-1by3",
57 }
58 }
59}
60
61#[derive(Props, Clone, PartialEq)]
62pub struct ImageProps {
63 #[props(default)]
64 pub size: Option<ImageSize>,
65 #[props(default)]
66 pub rounded: Option<bool>,
67 #[props(default)]
68 pub id: Option<String>,
69 #[props(default)]
70 pub class: Option<String>,
71 #[props(default)]
72 pub style: Option<String>,
73 pub children: Element,
74}
75
76#[component]
77pub fn Image(props: ImageProps) -> Element {
78 let rounded = props.rounded.unwrap_or(false);
79
80 let base_classes = vec!["image"];
81 let optional_classes = vec![
82 props.size.map(|s| s.as_str().to_string()),
83 if rounded { Some("is-rounded".to_string()) } else { None },
84 props.class.clone(),
85 ];
86
87 let final_class = build_class(&base_classes, &optional_classes);
88 let image_style = props.style.as_deref().unwrap_or("");
89
90 rsx! {
91 figure {
92 class: "{final_class}",
93 style: "{image_style}",
94 id: props.id.clone(),
95 {props.children}
96 }
97 }
98}