freya_elements/attributes/image_attributes.rs
1use crate::def_attribute;
2
3def_attribute!(
4 image_data,
5 image_reference,
6
7 /// `aspect_ratio` controls how an `image` element is rendered when facing unexpected dimensions.
8 ///
9 /// Accepted values:
10 /// - `fit`: The image will be rendered with its original dimensions.
11 /// - `none`: The image will be rendered stretching in all the maximum dimensions.
12 /// - `min` (default): The image will be rendered with the minimum dimensions possible.
13 /// - `max`: The image will be rendered with the maximum dimensions possible.
14 ///
15 /// ```rust, no_run
16 /// # use freya::prelude::*;
17 /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
18 ///
19 /// fn app() -> Element {
20 /// let image_data = static_bytes(RUST_LOGO);
21 /// rsx!(
22 /// image {
23 /// image_data,
24 /// width: "100%",
25 /// height: "100%",
26 /// aspect_ratio: "max"
27 /// }
28 /// )
29 /// }
30 /// ```
31 aspect_ratio,
32
33 /// `cover` controls how an `image` element position is rendered inside the given dimensions.
34 ///
35 /// Accepted values:
36 /// - `fill` (default): The image will be rendered from the start of the given dimensions.
37 /// - `center`: The image will be rendered in the center of the given dimensions.
38 ///
39 ///
40 /// ```rust, no_run
41 /// # use freya::prelude::*;
42 /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
43 ///
44 /// fn app() -> Element {
45 /// let image_data = static_bytes(RUST_LOGO);
46 /// rsx!(
47 /// image {
48 /// image_data,
49 /// width: "100%",
50 /// height: "100%",
51 /// cover: "center"
52 /// }
53 /// )
54 /// }
55 /// ```
56 cover,
57
58 /// `cache_key` lets you specify an unique identifier for the given image.
59 /// This will help Freya cache the image decoding, if the cache_key changes the old
60 /// cache will be pruned and the image (changed or not) will be decoded again.
61 /// `cache_key` is optinal but its recommended to be used, specialy for high quality images.
62 /// You can pass any value that can be transformed into a string. Like a URL.
63 ///
64 ///
65 /// ```rust, no_run
66 /// # use freya::prelude::*;
67 /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
68 ///
69 /// fn app() -> Element {
70 /// let image_data = static_bytes(RUST_LOGO);
71 /// rsx!(
72 /// image {
73 /// image_data,
74 /// width: "100%",
75 /// height: "100%",
76 /// cache_key: "rust-logo"
77 /// }
78 /// )
79 /// }
80 /// ```
81 cache_key,
82
83 /// `sampling` controls how an `image` element is resized when scaling from its original size to smaller or larger sizes.
84 ///
85 /// Accepted values:
86 /// - `nearest` or `none` (default): The image will be resized using nearest-neighbor interpolation.
87 /// - `bilinear`: The image will be resized using bilinear interpolation.
88 /// - `trilinear`: The image will be resized using trilinear interpolation.
89 /// - `mitchell`: The image will be resized using Mitchell-Netravali interpolation, also known as Bicubic.
90 /// - `catmull-rom`: The image will be resized using Catmull-Rom interpolation.
91 ///
92 ///
93 /// ```rust, no_run
94 /// # use freya::prelude::*;
95 /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
96 ///
97 /// fn app() -> Element {
98 /// let image_data = static_bytes(RUST_LOGO);
99 /// rsx!(
100 /// image {
101 /// image_data: image_data,
102 /// width: "96",
103 /// height: "96",
104 /// sampling: "trilinear",
105 /// }
106 /// )
107 /// }
108 /// ```
109 sampling,
110);