yew_bootstrap/component/card/
body.rs

1use yew::prelude::*;
2
3/// # Properties of [CardHeader]
4#[derive(Properties, Debug, PartialEq)]
5pub struct CardHeaderProps {
6    /// Inner components (displayed in the [CardHeader])
7    #[prop_or_default]
8    pub children: Children,
9    /// Extra CSS classes to include, in addition to the defaults.
10    #[prop_or_default]
11    pub class: Classes,
12}
13
14/// # Card Header component
15/// A header inside of a [Card](super::Card).
16///
17/// See [CardHeaderProps] for a property list.
18///
19/// ## Examples
20///
21/// ```
22/// use yew::prelude::*;
23/// use yew_bootstrap::component::card::*;
24/// fn test() -> Html {
25///   html! {
26///     <Card>
27///         <CardHeader>{"Card Head"}</CardHeader>
28///         <CardBody>{"Body text"}</CardBody>
29///         <CardFooter>{"Card Foot"}</CardFooter>
30///     </Card>
31///   }
32/// }
33/// ```
34#[function_component]
35pub fn CardHeader(props: &CardHeaderProps) -> Html {
36    let mut classes = props.class.clone();
37    classes.push("card-header");
38
39    html! {
40        <div class={classes}>
41            {props.children.clone()}
42        </div>
43    }
44}
45
46/// # Properties of [CardBody]
47#[derive(Properties, Debug, PartialEq)]
48pub struct CardBodyProps {
49    /// Inner components (displayed in the [CardBody])
50    #[prop_or_default]
51    pub children: Children,
52    /// Extra CSS classes to include, in addition to the defaults.
53    #[prop_or_default]
54    pub class: Classes,
55}
56
57/// # Card Body component
58/// A body inside of a [Card](super::Card). This may be implicitly added using the `body` prop in a
59/// [Card](super::Card)
60///
61/// See [CardBodyProps] for a property list.
62///
63/// ## Examples
64///
65/// ```
66/// use yew::prelude::*;
67/// use yew_bootstrap::component::card::*;
68/// fn test() -> Html {
69///   html! {
70///     <Card>
71///         <CardHeader>{"Card Head"}</CardHeader>
72///         <CardBody>{"Body text"}</CardBody>
73///         <CardFooter>{"Card Foot"}</CardFooter>
74///     </Card>
75///   }
76/// }
77/// ```
78#[function_component]
79pub fn CardBody(props: &CardBodyProps) -> Html {
80    let mut classes = props.class.clone();
81    classes.push("card-body");
82
83    html! {
84        <div class={classes}>
85            {props.children.clone()}
86        </div>
87    }
88}
89
90/// # Properties of [CardFooter]
91#[derive(Properties, Debug, PartialEq)]
92pub struct CardFooterProps {
93    /// Inner components (displayed in the [CardFooter])
94    #[prop_or_default]
95    pub children: Children,
96    /// Extra CSS classes to include, in addition to the defaults.
97    #[prop_or_default]
98    pub class: Classes,
99}
100
101/// # Card Footer component
102/// A footer inside of a [Card](super::Card).
103///
104/// See [CardFooterProps] for a property list.
105///
106/// ## Examples
107///
108/// ```
109/// use yew::prelude::*;
110/// use yew_bootstrap::component::card::*;
111/// fn test() -> Html {
112///   html! {
113///     <Card>
114///         <CardHeader>{"Card Head"}</CardHeader>
115///         <CardBody>{"Body text"}</CardBody>
116///         <CardFooter>{"Card Foot"}</CardFooter>
117///     </Card>
118///   }
119/// }
120/// ```
121#[function_component]
122pub fn CardFooter(props: &CardFooterProps) -> Html {
123    let mut classes = props.class.clone();
124    classes.push("card-footer");
125
126    html! {
127        <div class={classes}>
128            {props.children.clone()}
129        </div>
130    }
131}
132
133/// # Properties of [CardTitle]
134#[derive(Properties, Debug, PartialEq)]
135pub struct CardTitleProps {
136    /// Inner components (displayed in the [CardTitle])
137    #[prop_or_default]
138    pub children: Children,
139    /// Extra CSS classes to include, in addition to the defaults.
140    #[prop_or_default]
141    pub class: Classes,
142}
143
144/// # Card Title component
145/// Title text inside of a [CardBody].
146///
147/// See [CardTitleProps] for a property list.
148///
149/// ## Examples
150///
151/// ```
152/// use yew::prelude::*;
153/// use yew_bootstrap::component::card::*;
154/// fn test() -> Html {
155///   html! {
156///     <Card>
157///         <CardBody>
158///             <CardTitle>{"Title text"}</CardTitle>
159///             <CardSubtitle>{"Subtitle text"}</CardSubtitle>
160///             <CardText>{"Generic text"}</CardText>
161///         </CardBody>
162///     </Card>
163///   }
164/// }
165/// ```
166#[function_component]
167pub fn CardTitle(props: &CardTitleProps) -> Html {
168    let mut classes = props.class.clone();
169    classes.extend(["card-title", "h5"]);
170
171    html! {
172        <div class={classes}>
173            {props.children.clone()}
174        </div>
175    }
176}
177
178/// # Properties of [CardSubtitle]
179#[derive(Properties, Debug, PartialEq)]
180pub struct CardSubtitleProps {
181    /// Inner components (displayed in the [CardSubtitle])
182    #[prop_or_default]
183    pub children: Children,
184    /// Extra CSS classes to include, in addition to the defaults.
185    #[prop_or_default]
186    pub class: Classes,
187}
188
189/// # Card Subtitle component
190/// Subtitle text inside of a [CardBody].
191///
192/// See [CardSubtitleProps] for a property list.
193///
194/// ## Examples
195///
196/// ```
197/// use yew::prelude::*;
198/// use yew_bootstrap::component::card::*;
199/// fn test() -> Html {
200///   html! {
201///     <Card>
202///         <CardBody>
203///             <CardTitle>{"Title text"}</CardTitle>
204///             <CardSubtitle>{"Subtitle text"}</CardSubtitle>
205///             <CardText>{"Generic text"}</CardText>
206///         </CardBody>
207///     </Card>
208///   }
209/// }
210/// ```
211#[function_component]
212pub fn CardSubtitle(props: &CardSubtitleProps) -> Html {
213    let mut classes = props.class.clone();
214    classes.extend(["mb-2", "text-muted", "card-subtitle", "h6"]);
215
216    html!{
217        <div class={classes}>
218            {props.children.clone()}
219        </div>
220    }
221}
222
223/// # Properties of [CardText]
224#[derive(Properties, Debug, PartialEq)]
225pub struct CardTextProps {
226    /// Inner components (displayed in the [CardText])
227    #[prop_or_default]
228    pub children: Children,
229    /// Extra CSS classes to include, in addition to the defaults.
230    #[prop_or_default]
231    pub class: Classes,
232}
233
234/// # Card Title component
235/// Default paragraph text inside of a [CardBody].
236///
237/// See [CardTextProps] for a property list.
238///
239/// ## Examples
240///
241/// ```
242/// use yew::prelude::*;
243/// use yew_bootstrap::component::card::*;
244/// fn test() -> Html {
245///   html! {
246///     <Card>
247///         <CardBody>
248///             <CardTitle>{"Title text"}</CardTitle>
249///             <CardSubtitle>{"Subtitle text"}</CardSubtitle>
250///             <CardText>{"Generic text"}</CardText>
251///         </CardBody>
252///     </Card>
253///   }
254/// }
255/// ```
256#[function_component]
257pub fn CardText(props: &CardTextProps) -> Html {
258    let mut classes = props.class.clone();
259    classes.push("card-text");
260
261    html!{
262        <p class={classes}>
263            {props.children.clone()}
264        </p>
265    }
266}
267
268/// # Properties of [CardLink]
269#[derive(Properties, Debug, PartialEq)]
270pub struct CardLinkProps {
271    /// Inner components (displayed in the [CardLink])
272    #[prop_or_default]
273    pub children: Children,
274    /// Extra CSS classes to include, in addition to the defaults.
275    #[prop_or_default]
276    pub class: Classes,
277    /// URL that the link points to
278    pub url: AttrValue,
279}
280
281/// # Card Title component
282/// Title text inside of a [CardBody].
283///
284/// See [CardLinkProps] for a property list.
285///
286/// ## Examples
287///
288/// ```
289/// use yew::prelude::*;
290/// use yew_bootstrap::component::card::*;
291/// fn test() -> Html {
292///   html! {
293///     <Card body=true>
294///         <CardLink url="foo">{"Link text"}</CardLink>
295///     </Card>
296///   }
297/// }
298/// ```
299#[function_component]
300pub fn CardLink(props: &CardLinkProps) -> Html {
301    let mut classes = props.class.clone();
302    classes.push("card-link");
303
304    html!{
305        <a class={classes} href={props.url.clone()}>
306            {props.children.clone()}
307        </a>
308    }
309}
yew_bootstrap/component/card/body.rs

yew_bootstrap/component/card/
body.rs
