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