yew_bootstrap/component/
column.rs

1use gloo_console::warn;
2use yew::prelude::*;
3
4/// # Column container
5/// Used with [crate::component::Row] to create grids
6///
7/// See [crate::component::ColumnProps] for a listing of properties
8///
9/// ## Example
10/// ```rust
11/// use yew::prelude::*;
12/// use yew_bootstrap::component::{Column, Row};
13/// fn test() -> Html {
14///     html!{
15///         <Row>
16///             <Column sm=1 lg=4><p>{ "First column" }</p></Column>
17///             <Column sm=2 lg=8><p>{ "Second column" }</p></Column>
18///         </Row>
19///     }
20/// }
21/// ```
22pub struct Column {}
23
24/// # Properties for [Column]
25#[derive(Properties, Clone, PartialEq)]
26pub struct ColumnProps {
27    /// CSS class
28    #[prop_or_default]
29    pub class: String,
30
31    /// Children
32    #[prop_or_default]
33    pub children: Children,
34
35    /// Default size (Out of 12)
36    #[prop_or(Some(0))]
37    pub size: Option<u8>,
38
39    /// Size (out of 12) for small screens
40    #[prop_or_default]
41    pub sm: Option<u8>,
42
43    /// Size (out of 12) for medium screens
44    #[prop_or_default]
45    pub md: Option<u8>,
46
47    /// Size (out of 12) for large screens
48    #[prop_or_default]
49    pub lg: Option<u8>,
50
51    /// Size (out of 12) for very large screens
52    #[prop_or_default]
53    pub xl: Option<u8>,
54
55    /// Size (out of 12) for very very large screens
56    #[prop_or_default]
57    pub xxl: Option<u8>,
58
59    /// Event called when the element is clicked
60    #[prop_or_default]
61    pub onclick: Callback<MouseEvent>,
62}
63
64impl Component for Column {
65    type Message = ();
66    type Properties = ColumnProps;
67
68    fn create(_ctx: &Context<Self>) -> Self {
69        Self {}
70    }
71
72    fn view(&self, ctx: &Context<Self>) -> Html {
73        let props = ctx.props();
74        if props.size.unwrap_or(0) > 12 {
75            warn!("Column `size` cannot be greater than 12");
76        }
77        if props.sm.unwrap_or(0) > 12 {
78            warn!("Column `sm` size cannot be greater than 12");
79        }
80        if props.md.unwrap_or(0) > 12 {
81            warn!("Column `md` size cannot be greater than 12");
82        }
83        if props.lg.unwrap_or(0) > 12 {
84            warn!("Column `lg` size cannot be greater than 12");
85        }
86        if props.xl.unwrap_or(0) > 12 {
87            warn!("Column `xl` size cannot be greater than 12");
88        }
89        if props.xxl.unwrap_or(0) > 12 {
90            warn!("Column `xxl` size cannot be greater than 12");
91        }
92        let mut classes = Classes::new();
93        if let Some(size) = props.size {
94            if size == 0 {
95                classes.push("col");
96            } else {
97                classes.push("col-".to_string() + &size.to_string());
98            }
99        }
100        if let Some(sm) = props.sm {
101            classes.push("col-sm-".to_string() + &sm.to_string());
102        }
103        if let Some(md) = props.md {
104            classes.push("col-md-".to_string() + &md.to_string());
105        }
106        if let Some(lg) = props.lg {
107            classes.push("col-lg-".to_string() + &lg.to_string());
108        }
109        if let Some(xl) = props.xl {
110            classes.push("col-xl-".to_string() + &xl.to_string());
111        }
112        if let Some(xxl) = props.xxl {
113            classes.push("col-xxl-".to_string() + &xxl.to_string());
114        }
115        classes.push(props.class.clone());
116
117        html! {
118            <div
119                class={classes}
120                onclick={props.onclick.clone()}
121            >
122                { for props.children.iter() }
123            </div>
124        }
125    }
126}
yew_bootstrap/component/column.rs

yew_bootstrap/component/
column.rs
