freya_elements/attributes/layout_attributes.rs
1use crate::def_attribute;
2
3def_attribute!(
4 /// Specify the width for the given element.
5 ///
6 /// See syntax in [`Size Units`](crate::_docs::size_unit).
7 ///
8 /// ### Example
9 ///
10 /// ```rust, no_run
11 /// # use freya::prelude::*;
12 /// fn app() -> Element {
13 /// rsx!(
14 /// rect {
15 /// background: "red",
16 /// width: "15",
17 /// height: "50",
18 /// }
19 /// )
20 /// }
21 /// ```
22 height,
23
24 /// Specify the height for the given element.
25 ///
26 /// See syntax in [`Size Units`](crate::_docs::size_unit).
27 ///
28 /// ### Example
29 ///
30 /// ```rust, no_run
31 /// # use freya::prelude::*;
32 /// fn app() -> Element {
33 /// rsx!(
34 /// rect {
35 /// background: "red",
36 /// width: "15",
37 /// height: "50",
38 /// }
39 /// )
40 /// }
41 /// ```
42 width,
43
44 /// Specify a minimum height for the given element.
45 /// This can be useful if you use it alongside a percentage for the target size.
46 ///
47 /// See syntax for [`Size Units`](crate::_docs::size_unit).
48 ///
49 /// ##### Usage
50 ///
51 /// ```rust, no_run
52 /// # use freya::prelude::*;
53 /// fn app() -> Element {
54 /// rsx!(
55 /// rect {
56 /// background: "red",
57 /// min_width: "100",
58 /// min_height: "100",
59 /// width: "50%",
60 /// height: "50%",
61 /// }
62 /// )
63 /// }
64 /// ```
65 min_width,
66
67 //// Specify a minimum width for the given element.
68 /// This can be useful if you use it alongside a percentage for the target size.
69 ///
70 /// See syntax for [`Size Units`](crate::_docs::size_unit).
71 ///
72 /// ##### Usage
73 ///
74 /// ```rust, no_run
75 /// # use freya::prelude::*;
76 /// fn app() -> Element {
77 /// rsx!(
78 /// rect {
79 /// background: "red",
80 /// min_width: "100",
81 /// min_height: "100",
82 /// width: "50%",
83 /// height: "50%",
84 /// }
85 /// )
86 /// }
87 /// ```
88 min_height,
89
90 /// Specify a maximum width for the given element.
91 ///
92 /// See syntax for [`Size Units`](crate::_docs::size_unit).
93 ///
94 /// ##### Usage
95 ///
96 /// ```rust, no_run
97 /// # use freya::prelude::*;
98 /// fn app() -> Element {
99 /// rsx!(
100 /// rect {
101 /// background: "red",
102 /// max_width: "50%",
103 /// width: "500",
104 /// height: "500",
105 /// }
106 /// )
107 /// }
108 /// ```
109 max_width,
110
111 /// Specify a maximum height for the given element.
112 ///
113 /// See syntax for [`Size Units`](crate::_docs::size_unit).
114 ///
115 /// ##### Usage
116 ///
117 /// ```rust, no_run
118 /// # use freya::prelude::*;
119 /// fn app() -> Element {
120 /// rsx!(
121 /// rect {
122 /// background: "red",
123 /// max_height: "50%",
124 /// width: "500",
125 /// height: "500",
126 /// }
127 /// )
128 /// }
129 /// ```
130 max_height,
131
132 /// Specify the percentage of width to be visible.
133 ///
134 /// ##### Usage
135 ///
136 /// ```rust, no_run
137 /// # use freya::prelude::*;
138 /// fn app() -> Element {
139 /// rsx!(
140 /// rect {
141 /// background: "red",
142 /// visible_width: "50%", // 250
143 /// width: "500",
144 /// height: "500",
145 /// }
146 /// )
147 /// }
148 /// ```
149 visible_width,
150
151 /// Specify the percentage of height to be visible.
152 ///
153 /// ##### Usage
154 ///
155 /// ```rust, no_run
156 /// # use freya::prelude::*;
157 /// fn app() -> Element {
158 /// rsx!(
159 /// rect {
160 /// background: "red",
161 /// visible_height: "50%", // 250
162 /// width: "500",
163 /// height: "500",
164 /// }
165 /// )
166 /// }
167 /// ```
168 visible_height,
169
170 /// Specify the margin of an element.
171 /// You can do so by four different ways, just like in CSS.
172 ///
173 /// ### Example
174 ///
175 /// ```rust, no_run
176 /// # use freya::prelude::*;
177 /// fn app() -> Element {
178 /// rsx!(
179 /// rect {
180 /// margin: "25", // 25 in all sides
181 /// margin: "100 50", // 100 in top and bottom, and 50 in left and right
182 /// margin: "2 15 25", // 2 in top, 15 in left and right, and 25 in bottom
183 /// margin: "5 7 3 9" // 5 in top, 7 in right, 3 in bottom and 9 in left
184 /// }
185 /// )
186 /// }
187 /// ```
188 margin,
189
190 /// Specify the inner paddings of an element. You can do so by four different ways, just like in CSS.
191 ///
192 /// ### Example
193 ///
194 /// ```rust, no_run
195 /// # use freya::prelude::*;
196 /// fn app() -> Element {
197 /// rsx!(
198 /// rect {
199 /// padding: "25", // 25 in all sides
200 /// padding: "100 50", // 100 in top and bottom, and 50 in left and right
201 /// padding: "2 15 25", // 2 in top, 15 in left and right, and 25 in bottom
202 /// padding: "5 7 3 9" // 5 in top, 7 in right, 3 in bottom and 9 in left
203 /// }
204 /// )
205 /// }
206 /// ```
207 padding,
208
209 /// Specify how you want the element to be positioned inside it's parent area.
210 ///
211 /// Accepted values:
212 ///
213 /// - `stacked` (default)
214 /// - `absolute` (Floating element relative to the parent element)
215 /// - `global` (Floating element relative to the window)
216 ///
217 /// When using the `absolute` or `global` modes, you can also combine them with the following attributes:
218 ///
219 /// - `position_top`
220 /// - `position_right`
221 /// - `position_bottom`
222 /// - `position_left`
223 ///
224 /// These only support pixels.
225 ///
226 /// ### Example
227 ///
228 /// ```rust, no_run
229 /// # use freya::prelude::*;
230 /// fn app() -> Element {
231 /// rsx!(
232 /// rect {
233 /// width: "100%",
234 /// height: "100%",
235 /// rect {
236 /// position: "absolute",
237 /// position_bottom: "15",
238 /// position_right: "15",
239 /// background: "black",
240 /// width: "100",
241 /// height: "100",
242 /// }
243 /// }
244 /// )
245 /// }
246 /// ```
247 position,
248 position_top,
249 position_right,
250 position_bottom,
251 position_left,
252
253 /// Control how the inner elements stack.
254 ///
255 /// Accepted values:
256 ///
257 /// - `vertical` (default)
258 /// - `horizontal`
259 ///
260 /// ##### Usage
261 ///
262 /// ```rust, no_run
263 /// # use freya::prelude::*;
264 /// fn app() -> Element {
265 /// rsx!(
266 /// rect {
267 /// width: "100%",
268 /// height: "100%",
269 /// direction: "vertical",
270 /// rect {
271 /// width: "100%",
272 /// height: "50%",
273 /// background: "red"
274 /// },
275 /// rect {
276 /// width: "100%",
277 /// height: "50%",
278 /// background: "green"
279 /// }
280 /// }
281 /// )
282 /// }
283 /// ```
284 direction,
285
286 /// Specify how you want the automatic (e.g `width: auto`) bounds in the cross axis to be constrained for the inner elements.
287 ///
288 /// Accepted values:
289 ///
290 /// - `normal` (default): Uses parent bounds.
291 /// - `fit`: Uses parent bounds but later shrunks to the size of the biggest element inside.
292 /// - `flex`: Marks the container as flex container, children of this element will be able to use `size`/`size(n)` in their `width` and `height` attributes.
293 ///
294 ///
295 /// ### `fit`
296 ///
297 /// The `fit` mode will allow the inner elements using `width: fill-min` to expand to the biggest element inside this element.
298 ///
299 /// ```rust, no_run
300 /// # use freya::prelude::*;
301 /// fn app() -> Element {
302 /// rsx!(
303 /// rect {
304 /// content: "fit",
305 /// height: "100%",
306 /// rect {
307 /// width: "fill-min", // Will have a width of 300px
308 /// height: "25%",
309 /// background: "red",
310 /// }
311 /// rect {
312 /// width: "150", // Will have a width of 150px
313 /// height: "25%",
314 /// background: "green",
315 /// }
316 /// rect {
317 /// width: "fill-min", // Will have a width of 300px
318 /// height: "25%",
319 /// background: "blue",
320 /// }
321 /// rect {
322 /// width: "300", // Biggest element, will have a width of 300px
323 /// height: "25%",
324 /// background: "black",
325 /// }
326 /// }
327 /// )
328 /// }
329 /// ```
330 content,
331
332 /// ### main_align
333 ///
334 /// Control how the inner elements are positioned inside the element. You can combine it with the `direction` attribute to create complex flows.
335 ///
336 /// Accepted values for `main_align`:
337 ///
338 /// - `start` (default): At the begining of the axis
339 /// - `center`: At the center of the axis
340 /// - `end`: At the end of the axis
341 /// - `space-between`(only for `main_align`): Distributed among the available space
342 /// - `space-around` (only for `main_align`): Distributed among the available space with small margins in the sides
343 /// - `space-evenly` (only for `main_align`): Distributed among the available space with the same size of margins in the sides and in between the elements.
344 ///
345 /// Accepted values for `cross_align`:
346 ///
347 /// - `start` (default): At the begining of the axis (same as in `main_align`)
348 /// - `center`: At the center of the axis (same as in `main_align`)
349 /// - `end`: At the end of the axis (same as in `main_align`)
350 ///
351 /// When using the `vertical` direction it uses the Y axis and in `horizontal` direction it uses the X axis.
352 ///
353 /// Example on how to center the inner elements in the main axis:
354 ///
355 /// ```rust, no_run
356 /// # use freya::prelude::*;
357 /// fn app() -> Element {
358 /// rsx!(
359 /// rect {
360 /// width: "100%",
361 /// height: "100%",
362 /// main_align: "center",
363 /// rect {
364 /// width: "50%",
365 /// height: "50%",
366 /// background: "red"
367 /// },
368 /// }
369 /// )
370 /// }
371 /// ```
372 main_align,
373
374 /// ### cross_align
375 ///
376 /// Control how the inner elements are positioned inside the element in the axis perpendicular to the direction.
377 ///
378 /// Accepted values:
379 ///
380 /// - `start` (default): At the begining of the axis (same as in `main_align`)
381 /// - `center`: At the center of the axis (same as in `main_align`)
382 /// - `end`: At the end of the axis (same as in `main_align`)
383 ///
384 /// When using the `vertical` direction it uses the X axis and in `horizontal` direction it uses the Y axis.
385 ///
386 /// Example on how to center the inner elements in the cross axis:
387 ///
388 /// ```rust, no_run
389 /// # use freya::prelude::*;
390 /// fn app() -> Element {
391 /// rsx!(
392 /// rect {
393 /// width: "100%",
394 /// height: "100%",
395 /// cross_align: "center",
396 /// rect {
397 /// width: "50%",
398 /// height: "50%",
399 /// background: "red"
400 /// },
401 /// }
402 /// )
403 /// }
404 /// ```
405 cross_align,
406
407 /// Specify a space between the inner elements. Think it as a margin for every element but defined by its parent.
408 /// It only applies to the side of the direction.
409 ///
410 /// ### Example
411 ///
412 /// ```rust, no_run
413 /// # use freya::prelude::*;
414 /// fn app() -> Element {
415 /// rsx!(
416 /// rect {
417 /// direction: "vertical",
418 /// spacing: "20",
419 /// // Not before
420 /// rect {
421 /// width: "100",
422 /// height: "100",
423 /// background: "red",
424 /// }
425 /// // There will be a space between these two elements of 20 pixels
426 /// rect {
427 /// width: "100",
428 /// height: "100",
429 /// background: "blue",
430 /// }
431 /// // Here as well
432 /// rect {
433 /// width: "100",
434 /// height: "100",
435 /// background: "green",
436 /// }
437 /// // But not after
438 /// }
439 /// )
440 /// }
441 /// ```
442 spacing,
443
444 /// Specify how overflow should be handled.
445 ///
446 /// Accepted values:
447 ///
448 /// - `clip`
449 /// - `none`
450 ///
451 /// ### Example
452 ///
453 /// ```rust, no_run
454 /// # use freya::prelude::*;
455 /// fn app() -> Element {
456 /// rsx!(
457 /// rect {
458 /// overflow: "clip",
459 /// width: "100",
460 /// height: "100%",
461 /// rect {
462 /// width: "500",
463 /// height: "100%",
464 /// background: "red",
465 /// }
466 /// }
467 /// )
468 /// }
469 /// ```
470 overflow,
471
472 offset_x,
473 offset_y,
474
475 layer,
476);