freya_elements/_docs/
size_unit.rs

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

freya_elements/_docs/
size_unit.rs
