ybc/components/
card.rs

1use yew::prelude::*;
2
3#[derive(Clone, Debug, Properties, PartialEq)]
4pub struct CardProps {
5    #[prop_or_default]
6    pub children: Children,
7    #[prop_or_default]
8    pub classes: Classes,
9}
10
11/// An all-around flexible and composable component; this is the card container.
12///
13/// [https://bulma.io/documentation/components/card/](https://bulma.io/documentation/components/card/)
14#[function_component(Card)]
15pub fn card(props: &CardProps) -> Html {
16    html! {
17        <div class={classes!("card", props.classes.clone())}>
18            {props.children.clone()}
19        </div>
20    }
21}
22
23//////////////////////////////////////////////////////////////////////////////
24//////////////////////////////////////////////////////////////////////////////
25
26#[derive(Clone, Debug, Properties, PartialEq)]
27pub struct CardHeaderProps {
28    #[prop_or_default]
29    pub children: Children,
30    #[prop_or_default]
31    pub classes: Classes,
32}
33
34/// A container for card header content; rendered as a horizontal bar with a shadow.
35///
36/// [https://bulma.io/documentation/components/card/](https://bulma.io/documentation/components/card/)
37#[function_component(CardHeader)]
38pub fn card_header(props: &CardHeaderProps) -> Html {
39    html! {
40        <header class={classes!("card-header", props.classes.clone())}>
41            {props.children.clone()}
42        </header>
43    }
44}
45
46//////////////////////////////////////////////////////////////////////////////
47//////////////////////////////////////////////////////////////////////////////
48
49#[derive(Clone, Debug, Properties, PartialEq)]
50pub struct CardImageProps {
51    #[prop_or_default]
52    pub children: Children,
53    #[prop_or_default]
54    pub classes: Classes,
55}
56
57/// A fullwidth container for a responsive image.
58///
59/// [https://bulma.io/documentation/components/card/](https://bulma.io/documentation/components/card/)
60#[function_component(CardImage)]
61pub fn card_image(props: &CardImageProps) -> Html {
62    html! {
63        <div class={classes!("card-image", props.classes.clone())}>
64            {props.children.clone()}
65        </div>
66    }
67}
68
69//////////////////////////////////////////////////////////////////////////////
70//////////////////////////////////////////////////////////////////////////////
71
72#[derive(Clone, Debug, Properties, PartialEq)]
73pub struct CardContentProps {
74    #[prop_or_default]
75    pub children: Children,
76    #[prop_or_default]
77    pub classes: Classes,
78}
79
80/// A container for any other content as the body of the card.
81///
82/// [https://bulma.io/documentation/components/card/](https://bulma.io/documentation/components/card/)
83#[function_component(CardContent)]
84pub fn card_content(props: &CardContentProps) -> Html {
85    html! {
86        <div class={classes!("card-content", props.classes.clone())}>
87            {props.children.clone()}
88        </div>
89    }
90}
91
92//////////////////////////////////////////////////////////////////////////////
93//////////////////////////////////////////////////////////////////////////////
94
95#[derive(Clone, Debug, Properties, PartialEq)]
96pub struct CardFooterProps {
97    #[prop_or_default]
98    pub children: Children,
99    #[prop_or_default]
100    pub classes: Classes,
101}
102
103/// A container for card footer content; rendered as a horizontal list of controls.
104///
105/// [https://bulma.io/documentation/components/card/](https://bulma.io/documentation/components/card/)
106#[function_component(CardFooter)]
107pub fn card_footer(props: &CardFooterProps) -> Html {
108    html! {
109        <footer class={classes!("card-footer", props.classes.clone())}>
110            {props.children.clone()}
111        </footer>
112    }
113}
ybc/components/card.rs

ybc/components/
card.rs
