patternfly_yew/layouts/
grid.rs

1//! Grid
2
3use crate::prelude::{ExtendClasses, WithBreakpoints};
4use yew::prelude::*;
5
6#[derive(Clone, PartialEq, Properties)]
7pub struct GridProperties {
8    #[prop_or_default]
9    pub children: Html,
10    #[prop_or_default]
11    pub gutter: bool,
12    #[prop_or_default]
13    pub cols: WithBreakpoints<usize>,
14}
15
16/// Grid layout
17///
18/// See: <https://www.patternfly.org/layouts/grid>
19///
20/// ## Properties
21///
22/// Defined by [`GridProperties`].
23///
24/// ## Children
25///
26/// The grid layout is supposed to contain [`GridItem`] children. However, there is no restriction
27/// through component types on that.
28#[function_component(Grid)]
29pub fn grid(props: &GridProperties) -> Html {
30    let mut classes = Classes::from("pf-v5-l-grid");
31
32    if props.gutter {
33        classes.push("pf-m-gutter");
34    }
35
36    classes.extend_from(&props.cols.mapped(|cols| format!("pf-m-all-{}-col", cols)));
37
38    html! {
39        <div class={classes}>
40            { props.children.clone() }
41        </div>
42    }
43}
44
45#[derive(Clone, PartialEq, Properties)]
46pub struct GridItemProperties {
47    #[prop_or_default]
48    pub children: Html,
49
50    #[prop_or_default]
51    pub cols: WithBreakpoints<u16>,
52    #[prop_or_default]
53    pub rows: WithBreakpoints<u16>,
54    #[prop_or_default]
55    pub offset: WithBreakpoints<u16>,
56}
57
58/// An item in the [`Grid`] layout.
59///
60/// ## Properties
61///
62/// Defined by [`GridItemProperties`].
63#[function_component(GridItem)]
64pub fn grid_item(props: &GridItemProperties) -> Html {
65    let mut classes = Classes::from("pf-v5-l-grid__item");
66
67    classes.extend_from(&props.cols.mapped(|cols| format!("pf-m-{}-col", cols)));
68    classes.extend_from(&props.rows.mapped(|cols| format!("pf-m-{}-row", cols)));
69    classes.extend_from(
70        &props
71            .offset
72            .mapped(|cols| format!("pf-m-offset-{}-col", cols)),
73    );
74
75    html! {
76            <div class={classes}>
77                { props.children.clone() }
78            </div>
79    }
80}
patternfly_yew/layouts/grid.rs

patternfly_yew/layouts/
grid.rs
