patternfly_yew/layouts/
gallery.rs

1//! Gallery
2
3use crate::prelude::wrap::wrapper_div_with_attributes;
4use yew::prelude::*;
5use yew::virtual_dom::ApplyAttributeAs;
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-v5-l-gallery");
28
29    if props.gutter {
30        classes.push(classes!("pf-m-gutter"));
31    }
32
33    html! (
34        <div
35            class={classes}
36            style={&props.style}
37        >
38        { for props.children.iter().map(|child|{
39            wrapper_div_with_attributes(child, &[("class", "pf-v5-l-gallery__item", ApplyAttributeAs::Attribute)])
40        }) }
41        </div>
42    )
43}
patternfly_yew/layouts/gallery.rs

patternfly_yew/layouts/
gallery.rs
