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

patternfly_yew/layouts/
grid.rs
