patternfly_yew/layouts/
split.rs

1//! Split
2
3use yew::prelude::*;
4
5#[derive(Clone, PartialEq, Properties)]
6pub struct SplitProperties {
7    pub children: ChildrenWithProps<SplitItem>,
8    #[prop_or_default]
9    pub gutter: bool,
10    #[prop_or_default]
11    pub wrap: bool,
12}
13
14/// Split layout
15///
16/// > Use a **Split** layout to position items horizontally in a container, with one item filling the remaining horizontal space as the viewport is resized.
17///
18/// See: <https://www.patternfly.org/layouts/split>
19///
20/// ## Properties
21///
22/// Defined by [`SplitProperties`].
23///
24/// ## Children
25///
26/// The grid layout is supposed to contain [`crate::prelude::SplitItem`] children.
27///
28/// ## Example
29///
30/// ```rust
31/// use yew::prelude::*;
32/// use patternfly_yew::prelude::*;
33///
34/// #[function_component(Example)]
35/// fn example() -> Html {
36///   html!(
37///     <Split gutter=true>
38///       <SplitItem>{"Foo"}</SplitItem>
39///       <SplitItem fill=true>{"Full Width"}</SplitItem>
40///     </Split>
41///   )
42/// }
43/// ```
44#[function_component(Split)]
45pub fn split(props: &SplitProperties) -> Html {
46    let mut classes = Classes::from("pf-v6-l-split");
47
48    if props.gutter {
49        classes.push("pf-m-gutter");
50    }
51
52    if props.wrap {
53        classes.push("pf-m-wrap");
54    }
55
56    html! (<div class={classes}>{ for props.children.iter() }</div>)
57}
58
59#[derive(Clone, PartialEq, Properties)]
60pub struct SplitItemProperties {
61    #[prop_or_default]
62    pub children: Html,
63    #[prop_or_default]
64    pub fill: bool,
65}
66
67/// An item in the [`Split`] layout.
68///
69/// ## Properties
70///
71/// Defined by [`SplitItemProperties`].
72#[function_component(SplitItem)]
73pub fn split_item(props: &SplitItemProperties) -> Html {
74    let mut classes = Classes::from("pf-v6-l-split__item");
75
76    if props.fill {
77        classes.push("pf-m-fill");
78    }
79
80    html!(<div class={classes}>{ props.children.clone() }</div>)
81}
patternfly_yew/layouts/split.rs

patternfly_yew/layouts/
split.rs
