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-v5-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! (
57        <div class={classes}>
58            { for props.children.iter() }
59        </div>
60    )
61}
62
63#[derive(Clone, PartialEq, Properties)]
64pub struct SplitItemProperties {
65    #[prop_or_default]
66    pub children: Html,
67    #[prop_or_default]
68    pub fill: bool,
69}
70
71/// An item in the [`Split`] layout.
72///
73/// ## Properties
74///
75/// Defined by [`SplitItemProperties`].
76#[function_component(SplitItem)]
77pub fn split_item(props: &SplitItemProperties) -> Html {
78    let mut classes = Classes::from("pf-v5-l-split__item");
79
80    if props.fill {
81        classes.push("pf-m-fill");
82    }
83
84    html!(
85        <div class={classes}>
86            { props.children.clone() }
87        </div>
88    )
89}
patternfly_yew/layouts/split.rs

patternfly_yew/layouts/
split.rs
