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-v5-l-stack");
30
31    if props.gutter {
32        classes.push("pf-m-gutter");
33    }
34
35    html! (
36        <div class={classes}>
37            { props.children.clone() }
38        </div>
39    )
40}
41
42#[derive(Clone, PartialEq, Properties)]
43pub struct StackItemProperties {
44    #[prop_or_default]
45    pub children: Html,
46    #[prop_or_default]
47    pub fill: bool,
48}
49
50/// An item in the [`Stack`] layout.
51///
52/// ## Properties
53///
54/// Defined by [`StackItemProperties`].
55#[function_component(StackItem)]
56pub fn stack_item(props: &StackItemProperties) -> Html {
57    let mut classes = Classes::from("pf-v5-l-stack__item");
58
59    if props.fill {
60        classes.push("pf-m-fill");
61    }
62
63    html! (
64        <div class={classes}>
65            { props.children.clone() }
66        </div>
67    )
68}
patternfly_yew/layouts/stack.rs

patternfly_yew/layouts/
stack.rs
