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
use crate*;
/// A basic element with no interactivity.
///
/// An element has no children and no special rendering logic. It can be used to render a rectangle,
/// a line or a circle using view styling rules.
///
/// # Examples
///
/// ## Element without visible styling
///
/// An element can be used without visible styling which displays nothing at all. This is useful to
/// create an invisible spacer between other views.
///
/// ```
/// # use vizia_core::prelude::*;
/// #
/// # let cx = &mut Context::default();
/// #
/// Element::new(cx)
/// .width(Pixels(100.0))
/// .height(Pixels(100.0));
/// ```
///
/// ## Element as a rectangle
///
/// An element can be used to display a rectangle like this black one with a size of 100 by 100 pixels.
///
/// ```
/// # use vizia_core::prelude::*;
/// #
/// # let cx = &mut Context::default();
/// #
/// Element::new(cx)
/// .width(Pixels(100.0))
/// .height(Pixels(100.0))
/// .background_color(Color::black());
/// ```
///
/// ## Element as a line
///
/// An element can be used to display a line like this black one with a size of 100 by 1 pixels.
///
/// ```
/// # use vizia_core::prelude::*;
/// #
/// # let cx = &mut Context::default();
/// #
/// Element::new(cx)
/// .width(Pixels(100.0))
/// .height(Pixels(1.0))
/// .background_color(Color::black());
/// ```
///
/// ## Element as a circle
///
/// An element can be used to display a circle like this black one with a diameter of 100 pixels.
/// To create a perfect circle the width and height of the element have to be equal and the
/// border radius has to be set to fifty percent.
///
/// ```
/// # use vizia_core::prelude::*;
/// #
/// # let cx = &mut Context::default();
/// #
/// Element::new(cx)
/// .width(Pixels(100.0))
/// .height(Pixels(100.0))
/// .corner_radius(Percentage(50.0))
/// .background_color(Color::black());
/// ```
///
/// ## Element as an image
///
/// An element can be used to display an image like this 100 by 100 pixels one. The image can
/// be set by using a stylesheet or by using a signal. The image has to be loaded manually by
/// using the [`Context::load_image`](crate::prelude::Context::load_image) method.
///
/// ```
/// # use vizia_core::prelude::*;
/// #
/// #
/// # struct AppData {
/// # picture: String,
/// # }
/// #
/// # impl Model for AppData {}
/// #
/// # let cx = &mut Context::default();
/// #
/// # AppData { picture: String::from("test.png") }.build(cx);
/// #
/// Element::new(cx)
/// .width(Pixels(100.0))
/// .height(Pixels(100.0));
/// ```
;
/// A view which can be used to add stretch space between two other views.
;