yew_bs/components/
card.rs

1use yew::prelude::*;
2use crate::components::common::Variant;
3#[derive(Properties, PartialEq)]
4pub struct CardProps {
5    #[prop_or_default]
6    pub children: Children,
7    #[prop_or_default]
8    pub bg: Option<Variant>,
9    #[prop_or_default]
10    pub text: Option<Variant>,
11    #[prop_or_default]
12    pub border: Option<Variant>,
13    #[prop_or_default]
14    pub class: Option<AttrValue>,
15    #[prop_or_default]
16    pub node_ref: NodeRef,
17}
18#[function_component(Card)]
19pub fn card(props: &CardProps) -> Html {
20    let mut classes = Classes::new();
21    classes.push("card");
22    if let Some(variant) = &props.bg {
23        classes.push(format!("bg-{}", variant.as_str()));
24    }
25    if let Some(variant) = &props.text {
26        classes.push(format!("text-{}", variant.as_str()));
27    }
28    if let Some(variant) = &props.border {
29        classes.push(format!("border-{}", variant.as_str()));
30    }
31    if let Some(class) = &props.class {
32        classes.push(class.to_string());
33    }
34    html! {
35        < div class = { classes } ref = { props.node_ref.clone() } > { for props.children
36        .iter() } </ div >
37    }
38}
39#[derive(Properties, PartialEq)]
40pub struct CardHeaderProps {
41    #[prop_or_default]
42    pub children: Children,
43    #[prop_or_default]
44    pub class: Option<AttrValue>,
45    #[prop_or_default]
46    pub node_ref: NodeRef,
47}
48#[function_component(CardHeader)]
49pub fn card_header(props: &CardHeaderProps) -> Html {
50    let mut classes = Classes::new();
51    classes.push("card-header");
52    if let Some(class) = &props.class {
53        classes.push(class.to_string());
54    }
55    html! {
56        < div class = { classes } ref = { props.node_ref.clone() } > { for props.children
57        .iter() } </ div >
58    }
59}
60#[derive(Properties, PartialEq)]
61pub struct CardBodyProps {
62    #[prop_or_default]
63    pub children: Children,
64    #[prop_or_default]
65    pub class: Option<AttrValue>,
66    #[prop_or_default]
67    pub node_ref: NodeRef,
68}
69#[function_component(CardBody)]
70pub fn card_body(props: &CardBodyProps) -> Html {
71    let mut classes = Classes::new();
72    classes.push("card-body");
73    if let Some(class) = &props.class {
74        classes.push(class.to_string());
75    }
76    html! {
77        < div class = { classes } ref = { props.node_ref.clone() } > { for props.children
78        .iter() } </ div >
79    }
80}
81#[derive(Properties, PartialEq)]
82pub struct CardFooterProps {
83    #[prop_or_default]
84    pub children: Children,
85    #[prop_or_default]
86    pub class: Option<AttrValue>,
87    #[prop_or_default]
88    pub node_ref: NodeRef,
89}
90#[function_component(CardFooter)]
91pub fn card_footer(props: &CardFooterProps) -> Html {
92    let mut classes = Classes::new();
93    classes.push("card-footer");
94    if let Some(class) = &props.class {
95        classes.push(class.to_string());
96    }
97    html! {
98        < div class = { classes } ref = { props.node_ref.clone() } > { for props.children
99        .iter() } </ div >
100    }
101}
102#[derive(Properties, PartialEq)]
103pub struct CardTitleProps {
104    #[prop_or_default]
105    pub children: Children,
106    #[prop_or_default]
107    pub class: Option<AttrValue>,
108    #[prop_or_default]
109    pub node_ref: NodeRef,
110}
111#[function_component(CardTitle)]
112pub fn card_title(props: &CardTitleProps) -> Html {
113    let mut classes = Classes::new();
114    classes.push("card-title");
115    if let Some(class) = &props.class {
116        classes.push(class.to_string());
117    }
118    html! {
119        < h5 class = { classes } ref = { props.node_ref.clone() } > { for props.children
120        .iter() } </ h5 >
121    }
122}
123#[derive(Properties, PartialEq)]
124pub struct CardTextProps {
125    #[prop_or_default]
126    pub children: Children,
127    #[prop_or_default]
128    pub class: Option<AttrValue>,
129    #[prop_or_default]
130    pub node_ref: NodeRef,
131}
132#[function_component(CardText)]
133pub fn card_text(props: &CardTextProps) -> Html {
134    let mut classes = Classes::new();
135    classes.push("card-text");
136    if let Some(class) = &props.class {
137        classes.push(class.to_string());
138    }
139    html! {
140        < p class = { classes } ref = { props.node_ref.clone() } > { for props.children
141        .iter() } </ p >
142    }
143}
144#[derive(Properties, PartialEq)]
145pub struct CardImgProps {
146    pub src: AttrValue,
147    #[prop_or_default]
148    pub alt: AttrValue,
149    #[prop_or_default]
150    pub top: bool,
151    #[prop_or_default]
152    pub bottom: bool,
153    #[prop_or_default]
154    pub class: Option<AttrValue>,
155    #[prop_or_default]
156    pub node_ref: NodeRef,
157}
158#[function_component(CardImg)]
159pub fn card_img(props: &CardImgProps) -> Html {
160    let mut classes = Classes::new();
161    classes.push("card-img");
162    if props.top {
163        classes.push("card-img-top");
164    } else if props.bottom {
165        classes.push("card-img-bottom");
166    }
167    if let Some(class) = &props.class {
168        classes.push(class.to_string());
169    }
170    html! {
171        < img src = { props.src.clone() } alt = { props.alt.clone() } class = { classes }
172        ref = { props.node_ref.clone() } />
173    }
174}
yew_bs/components/card.rs

yew_bs/components/
card.rs
