vizia_core/views/
element.rs

Help
1use crate::prelude::*;
2
3/// A basic element with no interactivity.
4///
5/// An element has no children and no special rendering logic. It can be used to render a rectangle,
6/// a line or a circle using view styling rules.
7///
8/// # Examples
9///
10/// ## Element without visible styling
11///
12/// An element can be used without visible styling which displays nothing at all. This is useful to
13/// create an invisible spacer between other views.
14///
15/// ```
16/// # use vizia_core::prelude::*;
17/// #
18/// # let cx = &mut Context::default();
19/// #
20/// Element::new(cx)
21///     .width(Pixels(100.0))
22///     .height(Pixels(100.0));
23/// ```
24///
25/// ## Element as a rectangle
26///
27/// An element can be used to display a rectangle like this black one with a size of 100 by 100 pixels.
28///
29/// ```
30/// # use vizia_core::prelude::*;
31/// #
32/// # let cx = &mut Context::default();
33/// #
34/// Element::new(cx)
35///     .width(Pixels(100.0))
36///     .height(Pixels(100.0))
37///     .background_color(Color::black());
38/// ```
39///
40/// ## Element as a line
41///
42/// An element can be used to display a line like this black one with a size of 100 by 1 pixels.
43///
44/// ```
45/// # use vizia_core::prelude::*;
46/// #
47/// # let cx = &mut Context::default();
48/// #
49/// Element::new(cx)
50///      .width(Pixels(100.0))
51///      .height(Pixels(1.0))
52///      .background_color(Color::black());
53/// ```
54///
55/// ## Element as a circle
56///
57/// An element can be used to display a circle like this black one with a diameter of 100 pixels.
58/// To create a perfect circle the width and height of the element have to be equal and the
59/// border radius has to be set to fifty percent.
60///
61/// ```
62/// # use vizia_core::prelude::*;
63/// #
64/// # let cx = &mut Context::default();
65/// #
66/// Element::new(cx)
67///     .width(Pixels(100.0))
68///     .height(Pixels(100.0))
69///     .border_radius(Percentage(50.0))
70///     .background_color(Color::black());
71/// ```
72///
73/// ## Element as an image
74///
75/// An element can be used to display an image like this 100 by 100 pixels one. The image can
76/// be set by using a stylesheet or by using a lens. The image has to be loaded manually by
77/// using the [`Context::load_image`](crate::prelude::Context::load_image) method.
78///
79/// ```
80/// # use vizia_core::prelude::*;
81/// #
82/// # #[derive(Lens)]
83/// # struct AppData {
84/// #     picture: String,
85/// # }
86/// #
87/// # impl Model for AppData {}
88/// #
89/// # let cx = &mut Context::default();
90/// #
91/// # AppData { picture: String::from("test.png") }.build(cx);
92/// #
93/// Element::new(cx)
94///     .width(Pixels(100.0))
95///     .height(Pixels(100.0));
96/// ```
97pub struct Element;
98
99impl Element {
100    /// Creates a new element.
101    ///
102    /// # Examples
103    ///
104    /// ```
105    /// # use vizia_core::prelude::*;
106    /// #
107    /// # let cx = &mut Context::default();
108    /// #
109    /// Element::new(cx);
110    /// ```
111    pub fn new(cx: &mut Context) -> Handle<Self> {
112        Self {}.build(cx, |_| {})
113    }
114}
115
116impl View for Element {
117    fn element(&self) -> Option<&'static str> {
118        Some("element")
119    }
120}
121
122/// A view which can be used to add stretch space between two other views.
123pub struct Spacer;
124
125impl Spacer {
126    /// Creates a new [Spacer] view.
127    pub fn new(cx: &mut Context) -> Handle<Self> {
128        Self {}.build(cx, |_| {})
129    }
130}
131
132impl View for Spacer {
133    fn element(&self) -> Option<&'static str> {
134        Some("spacer")
135    }
136}
vizia_core/views/element.rs

vizia_core/views/
element.rs
