patternfly_yew/layouts/
stack.rs

1//! Stack
2
3use yew::prelude::*;
4
5#[derive(Clone, PartialEq, Properties)]
6pub struct StackProperties {
7    #[prop_or_default]
8    pub children: Html,
9    #[prop_or_default]
10    pub gutter: bool,
11}
12
13/// Stack layout
14///
15/// > Use a Stack layout to position items vertically in a container, with one item filling the available vertical space.
16///
17/// See: <https://www.patternfly.org/layouts/stack>
18///
19/// ## Properties
20///
21/// Defined by [`StackProperties`].
22///
23/// ## Children
24///
25/// The stack layout is supposed to contain [`StackItem`] children. However, there is no restriction
26/// through component types on that.
27#[function_component(Stack)]
28pub fn stack(props: &StackProperties) -> Html {
29    let mut classes = Classes::from("pf-v6-l-stack");
30
31    if props.gutter {
32        classes.push("pf-m-gutter");
33    }
34
35    html! (<div class={classes}>{ props.children.clone() }</div>)
36}
37
38#[derive(Clone, PartialEq, Properties)]
39pub struct StackItemProperties {
40    #[prop_or_default]
41    pub children: Html,
42    #[prop_or_default]
43    pub fill: bool,
44}
45
46/// An item in the [`Stack`] layout.
47///
48/// ## Properties
49///
50/// Defined by [`StackItemProperties`].
51#[function_component(StackItem)]
52pub fn stack_item(props: &StackItemProperties) -> Html {
53    let mut classes = Classes::from("pf-v6-l-stack__item");
54
55    if props.fill {
56        classes.push("pf-m-fill");
57    }
58
59    html! (<div class={classes}>{ props.children.clone() }</div>)
60}
patternfly_yew/layouts/stack.rs

patternfly_yew/layouts/
stack.rs
