patternfly_yew/layouts/
gallery.rs

1//! Gallery
2
3use crate::prelude::wrap::wrapper_div_with_attributes;
4use yew::prelude::*;
5use yew::virtual_dom::AttributeOrProperty;
6
7#[derive(Clone, PartialEq, Properties)]
8pub struct GalleryProperties {
9    pub children: Children,
10    #[prop_or_default]
11    pub gutter: bool,
12    #[prop_or_default]
13    pub style: AttrValue,
14}
15
16/// Gallery layout
17///
18/// > Use a **Gallery** layout to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.
19///
20/// See: <https://www.patternfly.org/layouts/gallery>
21///
22/// ## Properties
23///
24/// Defined by [`GalleryProperties`].
25#[function_component(Gallery)]
26pub fn gallery(props: &GalleryProperties) -> Html {
27    let mut classes = classes!("pf-v6-l-gallery");
28
29    if props.gutter {
30        classes.push(classes!("pf-m-gutter"));
31    }
32
33    html! (
34        <div class={classes} style={&props.style}>
35            { for props.children.iter().map(|child|{
36            wrapper_div_with_attributes(child, &[("class", AttributeOrProperty::Static("pf-v6-l-gallery__item"))])
37        }) }
38        </div>
39    )
40}
patternfly_yew/layouts/gallery.rs

patternfly_yew/layouts/
gallery.rs
