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-v6-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!(<div {class}>{ props.children.clone() }</div>)
74}
75
76#[function_component(PanelMain)]
77pub fn panel_main(props: &ChildrenProperties) -> Html {
78    html!(<div class="pf-v6-c-panel__main">{ props.children.clone() }</div>)
79}
80
81#[function_component(PanelMainBody)]
82pub fn panel_main_body(props: &ChildrenProperties) -> Html {
83    html!(<div class="pf-v6-c-panel__main-body">{ props.children.clone() }</div>)
84}
85
86#[function_component(PanelHeader)]
87pub fn panel_header(props: &ChildrenProperties) -> Html {
88    html!(<div class="pf-v6-c-panel__header">{ props.children.clone() }</div>)
89}
90
91#[function_component(PanelFooter)]
92pub fn panel_footer(props: &ChildrenProperties) -> Html {
93    html!(<div class="pf-v6-c-panel__footer">{ props.children.clone() }</div>)
94}
patternfly_yew/components/panel/mod.rs

patternfly_yew/components/panel/
mod.rs
