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
use dioxus::prelude::*;
use freya_elements as dioxus_elements;
use freya_hooks::{
use_applied_theme,
BodyTheme,
BodyThemeWith,
};
/// Properties for the [`Body`] component.
#[derive(Props, Clone, PartialEq)]
pub struct BodyProps {
/// Theme override.
pub theme: Option<BodyThemeWith>,
/// Inner children for the Body.
pub children: Element,
/// Spacing for the inner children of the Body.
pub spacing: Option<String>,
/// Padding for the inner children of the Body.
pub padding: Option<String>,
/// Width of the Body.
#[props(default = "fill".to_string())]
pub width: String,
/// Height of the Body.
#[props(default = "fill".to_string())]
pub height: String,
/// Direction of the Body.
#[props(default = "vertical".to_string())]
pub direction: String,
}
/// Usually used to wrap the application root component.
///
/// # Styling
/// Inherits the [`BodyTheme`](freya_hooks::BodyTheme) theme.
///
/// # Example
///
/// ```no_run
/// # use freya::prelude::*;
/// fn app() -> Element {
/// rsx!(
/// Body {
/// label {
/// "Click this"
/// }
/// }
/// )
/// }
/// ```
#[allow(non_snake_case)]
pub fn Body(
BodyProps {
children,
theme,
spacing,
padding,
width,
height,
direction,
}: BodyProps,
) -> Element {
let theme = use_applied_theme!(&theme, body);
let BodyTheme { background, color } = theme;
rsx!(
rect {
width,
height,
color: "{color}",
background: "{background}",
spacing,
padding,
direction,
{&children}
}
)
}