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);