patternfly_yew/components/panel/
mod.rs

1//! Panel
2
3use crate::prelude::{AsClasses, ChildrenProperties, ExtendClasses};
4use yew::prelude::*;
5
6/// Properties for [`Panel`]
7#[derive(Clone, Debug, PartialEq, Properties)]
8pub struct PanelProperties {
9    pub children: Html,
10
11    #[prop_or_default]
12    pub variant: PanelVariant,
13    #[prop_or_default]
14    pub scrollable: bool,
15}
16
17#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
18pub enum PanelVariant {
19    #[default]
20    Default,
21    Bordered,
22    Raised,
23}
24
25impl AsClasses for PanelVariant {
26    fn extend_classes(&self, classes: &mut Classes) {
27        match self {
28            Self::Default => {}
29            Self::Bordered => classes.push(classes!("pf-m-bordered")),
30            Self::Raised => classes.push(classes!("pf-m-raised")),
31        }
32    }
33}
34
35/// The Panel component.
36///
37/// > The **panel** component is a container that supports flexible content layouts. It can be used to house other components such as fields, forms, videos, buttons, and more. The panel should not be confused with the drawer component, which allows you to surface information via a collapsable container.
38///
39/// See: <https://www.patternfly.org/components/panel>
40///
41/// ## Example
42///
43/// ```rust
44/// use patternfly_yew::prelude::*;
45/// use yew::prelude::*;
46///
47/// #[function_component(Example)]
48/// pub fn example() -> Html {
49///   html!(
50///     <Panel>
51///       <PanelHeader>{"Header"}</PanelHeader>
52///       <Divider/>
53///       <PanelMain>
54///         <PanelMainBody>
55///             {"Main body"}
56///         </PanelMainBody>
57///       </PanelMain>
58///       <PanelFooter>{"Footer"}</PanelFooter>
59///     </Panel>
60///   )
61/// }
62/// ```
63#[function_component(Panel)]
64pub fn panel(props: &PanelProperties) -> Html {
65    let mut class = classes!("pf-v5-c-panel");
66
67    class.extend_from(&props.variant);
68
69    if props.scrollable {
70        class.push(classes!("pf-m-scrollable"));
71    }
72
73    html!(
74        <div {class}>
75            { props.children.clone() }
76        </div>
77    )
78}
79
80#[function_component(PanelMain)]
81pub fn panel_main(props: &ChildrenProperties) -> Html {
82    html!(
83        <div class="pf-v5-c-panel__main">
84            { props.children.clone() }
85        </div>
86    )
87}
88
89#[function_component(PanelMainBody)]
90pub fn panel_main_body(props: &ChildrenProperties) -> Html {
91    html!(
92        <div class="pf-v5-c-panel__main-body">
93            { props.children.clone() }
94        </div>
95    )
96}
97
98#[function_component(PanelHeader)]
99pub fn panel_header(props: &ChildrenProperties) -> Html {
100    html!(
101        <div class="pf-v5-c-panel__header">
102            { props.children.clone() }
103        </div>
104    )
105}
106
107#[function_component(PanelFooter)]
108pub fn panel_footer(props: &ChildrenProperties) -> Html {
109    html!(
110        <div class="pf-v5-c-panel__footer">
111            { props.children.clone() }
112        </div>
113    )
114}
patternfly_yew/components/panel/mod.rs

patternfly_yew/components/panel/
mod.rs
