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