freya_elements/attributes/
style_attributes.rs

1use crate::def_attribute;
2
3def_attribute!(
4    /// Specify a color as the background of an element.
5    ///
6    /// You can learn about the syntax of this attribute in [`Color Syntax`](crate::_docs::color_syntax).
7    ///
8    /// ### Example
9    ///
10    /// ```rust, no_run
11    /// # use freya::prelude::*;
12    /// fn app() -> Element {
13    ///     rsx!(
14    ///         rect {
15    ///             background: "red"
16    ///         }
17    ///     )
18    /// }
19    /// ```
20    background,
21
22    /// Specify the opacity of an element's background color.
23    ///
24    /// ### Example
25    ///
26    /// ```rust, no_run
27    /// # use freya::prelude::*;
28    /// fn app() -> Element {
29    ///     rsx!(
30    ///         rect {
31    ///             background: "red",
32    ///             background_opacity: "0.5"
33    ///         }
34    ///     )
35    /// }
36    /// ```
37    background_opacity,
38
39    /// ### border
40    ///
41    /// You can add borders to an element using the `border` attribute.
42    /// - `border` syntax: `[width] [width?] [width?] [width?] <inner | outer | center> [fill]`.
43    ///
44    /// 1-4 width values should be provided with the `border` attribute. Widths will be applied to different sides of a `rect` depending on the number of values provided:
45    /// - One value: `all`
46    /// - Two values: `vertical`, `horizontal`
47    /// - Three values: `top` `horizontal` `bottom`
48    /// - Four values: `top` `right` `bottom` `left`
49    ///
50    /// *Border alignment* determines how the border is positioned relative to the element's edge. Alignment can be `inner`, `outer`, or `center`.
51    ///
52    /// ### Examples
53    ///
54    /// A solid, black border with a width of 2 pixels on every side. Border is aligned to the inside of the rect's edge.
55    ///
56    /// ```rust, no_run
57    /// # use freya::prelude::*;
58    /// fn app() -> Element {
59    ///     rsx!(
60    ///         rect {
61    ///             border: "2 inner black",
62    ///         }
63    ///     )
64    /// }
65    /// ```
66    ///
67    /// A solid, red border with different widths on each side. Border is aligned to the center of the rect's edge.
68    ///
69    /// ```rust, no_run
70    /// # use freya::prelude::*;
71    /// fn app() -> Element {
72    ///     rsx!(
73    ///         rect {
74    ///             border: "1 2 3 4 center red",
75    ///         }
76    ///     )
77    /// }
78    /// ```
79    ///
80    /// Borders can take any valid fill type, including gradients.
81    ///
82    /// ```rust, no_run
83    /// # use freya::prelude::*;
84    /// fn app() -> Element {
85    ///     rsx!(
86    ///         rect {
87    ///             border: "1 inner linear-gradient(red, green, yellow 40%, blue)",
88    ///         }
89    ///     )
90    /// }
91    /// ```
92    ///
93    /// Similarly to the `shadow` attribute, multiple borders can be drawn on a single element when separated by a comma. Borders specified later in the list are drawn on top of previous ones.
94    ///
95    /// ```rust, no_run
96    /// # use freya::prelude::*;
97    /// fn app() -> Element {
98    ///     rsx!(
99    ///         rect {
100    ///             border: "6 outer red, 5 outer orange, 4 outer yellow, 3 outer green, 2 outer blue, 1 outer purple",
101    ///         }
102    ///     )
103    /// }
104    /// ```
105    border,
106
107    /// Draw a shadow of the element.
108    ///
109    /// Syntax: `<x> <y> <intensity> <size> <color>`
110    ///
111    /// ### Example
112    ///
113    /// ```rust, no_run
114    /// # use freya::prelude::*;
115    /// fn app() -> Element {
116    ///     rsx!(
117    ///         rect {
118    ///             shadow: "0 0 25 2 rgb(0, 0, 0, 120)"
119    ///         }
120    ///     )
121    /// }
122    /// ```
123    shadow,
124
125    /// ### corner_radius & corner_smoothing
126    ///
127    /// The `corner_radius` attribute lets you smooth the corners of the element, with `corner_smoothing` you can give a "squircle" effect.
128    ///
129    /// ### Example
130    ///
131    /// ```rust, no_run
132    /// # use freya::prelude::*;
133    /// fn app() -> Element {
134    ///     rsx!(
135    ///         rect {
136    ///             corner_radius: "10",
137    ///             corner_smoothing: "75%"
138    ///         }
139    ///     )
140    /// }
141    /// ```
142    corner_radius,
143
144    /// ### corner_radius & corner_smoothing
145    ///
146    /// The `corner_radius` attribute lets you smooth the corners of the element, with `corner_smoothing` you can give a "squircle" effect.
147    ///
148    /// ### Example
149    ///
150    /// ```rust, no_run
151    /// # use freya::prelude::*;
152    /// fn app() -> Element {
153    ///     rsx!(
154    ///         rect {
155    ///             corner_radius: "10",
156    ///             corner_smoothing: "75%"
157    ///         }
158    ///     )
159    /// }
160    /// ```
161    corner_smoothing,
162);
freya_elements/attributes/style_attributes.rs

freya_elements/attributes/
style_attributes.rs
