yew_bootstrap/component/
container.rs

1use gloo_console::warn;
2use yew::prelude::*;
3
4/// Size for a container, from extra small to extra large
5#[derive(Clone, Debug, PartialEq, Eq)]
6pub enum ContainerSize {
7    ExtraSmall,
8    Small,
9    Medium,
10    Large,
11    ExtraLarge,
12    ExtraExtraLarge,
13}
14impl ToString for ContainerSize {
15    fn to_string(&self) -> String {
16        match self {
17            &ContainerSize::ExtraSmall => "".to_string(),
18            ContainerSize::Small => "sm".to_string(),
19            ContainerSize::Medium => "md".to_string(),
20            ContainerSize::Large => "lg".to_string(),
21            ContainerSize::ExtraLarge => "xl".to_string(),
22            ContainerSize::ExtraExtraLarge => "xxl".to_string(),
23        }
24    }
25}
26
27/// # Container component
28/// Global container for a page.
29///
30/// See [ContainerProps] for a listing of properties.
31///
32/// ## Example
33/// Example container:
34///
35/// ```rust
36/// use yew::prelude::*;
37/// use yew_bootstrap::component::{Container, ContainerSize};
38/// use yew_bootstrap::util::Color;
39/// fn test() -> Html {
40///     html!{
41///         <Container size={ContainerSize::Large} fluid={ true }/>
42///     }
43/// }
44/// ```
45pub struct Container {}
46
47/// Properties for [Container]
48#[derive(Properties, Clone, PartialEq)]
49pub struct ContainerProps {
50    /// CSS class
51    #[prop_or_default]
52    pub class: String,
53
54    /// Contents of the container
55    #[prop_or_default]
56    pub children: Children,
57
58    /// Size of the container
59    #[prop_or(ContainerSize::ExtraSmall)]
60    pub size: ContainerSize,
61
62    /// If true, fluid container - Size ignored and must be default.
63    #[prop_or_default]
64    pub fluid: bool,
65}
66
67impl Component for Container {
68    type Message = ();
69    type Properties = ContainerProps;
70
71    fn create(_ctx: &Context<Self>) -> Self {
72        Self {}
73    }
74
75    fn view(&self, ctx: &Context<Self>) -> Html {
76        let props = ctx.props();
77        let mut classes = Classes::new();
78        // ExtraSmall have no size class
79        if props.size != ContainerSize::ExtraSmall {
80            if props.fluid {
81                warn!("Fluid is set to true, but a size is also set. Fluid will be ignored.");
82            }
83            classes.push(format!("container-{}", props.size.to_string()));
84        } else if props.fluid {
85            classes.push("container-fluid");
86        } else {
87            classes.push("container");
88        }
89        classes.push(props.class.clone());
90
91        html! {
92            <div
93                class={classes}
94            >
95                { for props.children.iter() }
96            </div>
97        }
98    }
99}
yew_bootstrap/component/container.rs

yew_bootstrap/component/
container.rs
