freya_elements/attributes/
image_attributes.rs

1use crate::def_attribute;
2
3def_attribute!(
4    /// Specify the image data for the image element.
5    ///
6    /// Provides two main functions for handling image data:
7    /// - `static_bytes`: Takes a static byte slice (`&'static [u8]`) for static images.
8    /// - `dynamic_bytes`: Takes any value that can be converted into `Bytes` for dynamically loaded images.
9    ///
10    /// ### Example
11    ///
12    /// ```rust, no_run
13    /// # use freya::prelude::*;
14    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
15    ///
16    /// fn app() -> Element {
17    ///     rsx!(
18    ///         image {
19    ///             image_data: static_bytes(RUST_LOGO),
20    ///             width: "200",
21    ///             height: "200",
22    ///         }
23    ///     )
24    /// }
25    /// ```
26    ///
27    /// Using with dynamic bytes:
28    ///
29    /// ```rust, no_run
30    /// # use freya::prelude::*;
31    /// # use std::fs;
32    ///
33    /// #[component]
34    /// fn DynamicImage(image_data: ReadOnlySignal<Vec<u8>>) -> Element {
35    ///     rsx!(
36    ///         image {
37    ///             image_data: dynamic_bytes(image_data.read().clone()),
38    ///             width: "200",
39    ///             height: "200",
40    ///         }
41    ///     )
42    /// }
43    /// ```
44    image_data,
45
46    /// Specify an image reference handle for the image element.
47    ///
48    /// This attribute is primarily used in conjunction with the `use_camera` hook to display camera output.
49    image_reference,
50
51    /// `aspect_ratio` controls how an `image` element is rendered when facing unexpected dimensions.
52    ///
53    /// Accepted values:
54    /// - `fit`: The image will be rendered with its original dimensions.
55    /// - `none`: The image will be rendered stretching in all the maximum dimensions.
56    /// - `min` (default): The image will be rendered with the minimum dimensions possible.
57    /// - `max`: The image will be rendered with the maximum dimensions possible.
58    ///
59    /// ### Example
60    ///
61    /// ```rust, no_run
62    /// # use freya::prelude::*;
63    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
64    ///
65    /// fn app() -> Element {
66    ///     let image_data = static_bytes(RUST_LOGO);
67    ///     rsx!(
68    ///         image {
69    ///             image_data,
70    ///             width: "100%",
71    ///             height: "100%",
72    ///             aspect_ratio: "max"
73    ///         }
74    ///     )
75    /// }
76    /// ```
77    aspect_ratio,
78
79    /// `cover` controls how an `image` element position is rendered inside the given dimensions.
80    ///
81    /// Accepted values:
82    /// - `fill` (default): The image will be rendered from the start of the given dimensions.
83    /// - `center`: The image will be rendered in the center of the given dimensions.
84    ///
85    /// ### Example
86    ///
87    /// ```rust, no_run
88    /// # use freya::prelude::*;
89    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
90    ///
91    /// fn app() -> Element {
92    ///     let image_data = static_bytes(RUST_LOGO);
93    ///     rsx!(
94    ///         image {
95    ///             image_data,
96    ///             width: "100%",
97    ///             height: "100%",
98    ///             cover: "center"
99    ///         }
100    ///     )
101    /// }
102    /// ```
103    cover,
104
105    /// `cache_key` lets you specify an unique identifier for the given image.
106    /// This will help Freya cache the image decoding, if the cache_key changes the old
107    /// cache will be pruned and the image (changed or not) will be decoded again.
108    /// `cache_key` is optinal but its recommended to be used, specialy for high quality images.
109    /// You can pass any value that can be transformed into a string. Like a URL.
110    ///
111    /// ### Example
112    ///
113    /// ```rust, no_run
114    /// # use freya::prelude::*;
115    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
116    ///
117    /// fn app() -> Element {
118    ///     let image_data = static_bytes(RUST_LOGO);
119    ///     rsx!(
120    ///         image {
121    ///             image_data,
122    ///             width: "100%",
123    ///             height: "100%",
124    ///             cache_key: "rust-logo"
125    ///         }
126    ///     )
127    /// }
128    /// ```
129    cache_key,
130
131    /// `sampling` controls how an `image` element is resized when scaling from its original size to smaller or larger sizes.
132    ///
133    /// Accepted values:
134    /// - `nearest` or `none` (default): The image will be resized using nearest-neighbor interpolation.
135    /// - `bilinear`: The image will be resized using bilinear interpolation.
136    /// - `trilinear`: The image will be resized using trilinear interpolation.
137    /// - `mitchell`: The image will be resized using Mitchell-Netravali interpolation, also known as Bicubic.
138    /// - `catmull-rom`: The image will be resized using Catmull-Rom interpolation.
139    ///
140    /// ### Example
141    ///
142    /// ```rust, no_run
143    /// # use freya::prelude::*;
144    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
145    ///
146    /// fn app() -> Element {
147    ///     let image_data = static_bytes(RUST_LOGO);
148    ///     rsx!(
149    ///         image {
150    ///             image_data: image_data,
151    ///             width: "96",
152    ///             height: "96",
153    ///             sampling: "trilinear",
154    ///         }
155    ///     )
156    /// }
157    /// ```
158    sampling,
159);
freya_elements/attributes/image_attributes.rs

freya_elements/attributes/
image_attributes.rs
