yew_bootstrap/component/
line.rs

1use crate::util::*;
2use yew::prelude::*;
3
4/// # Horizontal or vertical line
5/// 
6/// See [LineProps] for a listing of properties.
7/// 
8/// ## Example
9/// Example line:
10/// 
11/// ```rust
12/// use yew::prelude::*;
13/// use yew_bootstrap::component::Line;
14/// use yew_bootstrap::util::{Size, Color};
15/// fn test() -> Html {
16///     html!{
17///         <Line width={ Size::Percent(80.0) } height={ Size::Px(1) } style={ Color::Light }/>
18///     }
19/// }
20/// ```
21pub struct Line {}
22
23/// Properties for [Line]
24#[derive(Properties, Clone, PartialEq)]
25pub struct LineProps {
26    /// CSS class
27    #[prop_or_default]
28    pub class: String,
29
30    /// Height of the line
31    #[prop_or_default]
32    pub height: Option<Size>,
33
34    /// Vertical (true) or horizontal line
35    #[prop_or_default]
36    pub vertical: bool,
37
38    /// Color style
39    #[prop_or_default]
40    pub style: Option<Color>,
41
42    /// Width of the line
43    #[prop_or_default]
44    pub width: Option<Size>,
45}
46
47impl Component for Line {
48    type Message = ();
49    type Properties = LineProps;
50
51    fn create(_ctx: &Context<Self>) -> Self {
52        Self {}
53    }
54
55    fn view(&self, ctx: &Context<Self>) -> Html {
56        let props = ctx.props();
57        let mut classes = Classes::new();
58        if props.vertical {
59            classes.push("vr");
60        }
61        if let Some(style) = props.style.clone() {
62            classes.push(format!("bg-{}", style));
63        }
64        classes.push(props.class.clone());
65
66        let mut css = String::new();
67        if let Some(height) = props.height.clone() {
68            css = format!("height: {}", height);
69        }
70        if let Some(width) = props.width.clone() {
71            css = format!("{}; width: {}", css, width);
72        }
73
74        if props.vertical {
75            html! {
76                <div class={classes} style={css} />
77            }
78        } else {
79            html! {
80                <hr class={classes} style={css} />
81            }
82        }
83    }
84}
yew_bootstrap/component/line.rs

yew_bootstrap/component/
line.rs
