yew_bootstrap/component/
display.rs

1use std::fmt;
2
3use yew::prelude::*;
4
5use crate::util::Color;
6
7/// # Display heading component
8/// Use Display when you need heading element to stand out
9///
10/// See [DisplayProps] for a listing of properties
11///
12/// ## Example
13/// ```rust
14/// use yew::prelude::*;
15/// use yew_bootstrap::component::Display;
16/// fn test() -> Html {
17///     html!{
18///         <Display>
19///             {"Display heading text"}
20///         </Display>
21///     }
22/// }
23/// ```
24pub struct Display {}
25
26/// # Properties of [Display]
27#[derive(Properties, Clone, PartialEq)]
28pub struct DisplayProps {
29    /// CSS class
30    #[prop_or_default]
31    pub class: String,
32
33    /// Inner components
34    #[prop_or_default]
35    pub children: Children,
36
37    /// Color style, default [Color::Dark]
38    #[prop_or(Color::Dark)]
39    pub style: Color,
40
41    /// Display size, default [DisplaySize::One]
42    #[prop_or(DisplaySize::One)]
43    pub size: DisplaySize,
44
45    /// Optional text placed before the children
46    #[prop_or_default]
47    pub text: String,
48}
49
50impl Component for Display {
51    type Message = ();
52    type Properties = DisplayProps;
53
54    fn create(_ctx: &Context<Self>) -> Self {
55        Self {}
56    }
57
58    fn view(&self, ctx: &Context<Self>) -> Html {
59        let props = ctx.props();
60        let mut classes = Classes::new();
61        classes.push(format!("display-{}", props.size));
62        classes.push(format!("text-{}", props.style));
63        classes.push(props.class.clone());
64
65        html! {
66            <h1 class={classes}>
67                { &props.text }
68                { for props.children.iter() }
69            </h1>
70        }
71    }
72}
73
74/// # Display sizes
75/// Bootstrap display sizes.
76#[derive(Clone, PartialEq, Eq)]
77pub enum DisplaySize {
78    One,
79    Two,
80    Three,
81    Four,
82    Five,
83    Six,
84}
85
86impl fmt::Display for DisplaySize {
87    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
88        match *self {
89            DisplaySize::One => write!(f, "1"),
90            DisplaySize::Two => write!(f, "2"),
91            DisplaySize::Three => write!(f, "3"),
92            DisplaySize::Four => write!(f, "4"),
93            DisplaySize::Five => write!(f, "5"),
94            DisplaySize::Six => write!(f, "6"),
95        }
96    }
97}
98
yew_bootstrap/component/display.rs

yew_bootstrap/component/
display.rs
