freya_elements/_docs/
size_unit.rs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
//! ### Size Units
//!
//! #### Auto
//! Will use it's inner children as size, so in this case, the `rect` width will be equivalent to the width of `label`:
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "auto",
//!             height: "33",
//!             label {
//!                 "hello!"
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! ##### Logical pixels
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "50",
//!         height: "33"
//!     })
//! }
//! ```
//!
//! ##### Parent percentage
//! Relative percentage to the parent equivalent value.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "50%",  // Half the parent
//!         height: "75%"  // 3/4 the parent
//!     })
//! }
//! ```
//!
//! ##### `calc()`
//!
//! For more complex logic you can use the `calc()` function.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(rect {
//!         width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent
//!         height: "calc(100% - 10)"      // 100% of the parent minus 10
//!     })
//! }
//! ```
//!
//! #### fill
//! Use the remaining available space from the parent area:
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "100%",
//!             height: "100%",
//!             rect {
//!                 height: "200",
//!                 width: "100%",
//!             }
//!             rect {
//!                 height: "fill", // This is the same as calc(100% - 200)
//!                 width: "100%",
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! If you place other elements after one that uses fill, they may be hidden because the element with `fill` will expand to occupy all available space:
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "100%",
//!             height: "100%",
//!             rect {
//!                 height: "fill", // This is the same as 100%
//!                 width: "100%",
//!             }
//!             rect {              // This element will not be visible
//!                 height: "200",
//!                 width: "100%",
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! #### fill-min
//! Will have the same size of the biggest sibling element inside a container who has `content: fit`.
//! For an example, see `content`.
//!
//! #### Viewport percentage
//! Relative percentage to the viewport (Window) equivalent value.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             width: "200",
//!             height: "200",
//!             rect {
//!                 height: "25v", // 25% of the window height no matter what height the parent has.
//!                 width: "100%",
//!             }
//!         }
//!     )
//! }
//! ```
//!
//! #### Flex Factor
//!
//! When being a children of an element with `content: flex` you may change the growth factor of the size attributes.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     rsx!(
//!         rect {
//!             content: "flex",
//!             width: "200",
//!             height: "200",
//!             rect {
//!                 height: "flex(1)",
//!                 width: "100%",
//!                 background: "red"
//!             }
//!             rect {
//!                 height: "flex(3)",
//!                 width: "100%",
//!                 background: "blue"
//!             }
//!         }
//!     )
//! }
//! ```