patternfly_yew/components/toolbar/
mod.rs

1//! Toolbar
2mod child;
3mod divider;
4mod group;
5mod item;
6
7pub use child::*;
8pub use divider::*;
9pub use group::*;
10pub use item::*;
11
12use crate::ouia;
13use crate::prelude::{AsClasses, ExtendClasses, WithBreakpoints};
14use crate::utils::{Ouia, OuiaComponentType, OuiaSafe};
15use yew::{html::ChildrenRenderer, prelude::*};
16
17const OUIA: Ouia = ouia!("Toolbar");
18
19/// Modifier for toolbar elements.
20#[derive(Clone, Copy, Eq, PartialEq, Debug)]
21pub enum ToolbarElementModifier {
22    Hidden,
23    Visible,
24    Start,
25    End,
26}
27
28impl AsClasses for ToolbarElementModifier {
29    fn extend_classes(&self, classes: &mut Classes) {
30        classes.push(match self {
31            Self::Hidden => "pf-m-hidden",
32            Self::Visible => "pf-m-visible",
33            Self::Start => "pf-m-align-start", // Only allowed as direct descendants of toolbar...
34            Self::End => "pf-m-align-end",     // ^
35        });
36    }
37}
38
39/// Cross-axis alignment of toolbar elements.
40///
41/// Used by the `align_items` and `align_self` properties of [`ToolbarContent`], [`ToolbarGroup`],
42/// and [`ToolbarItem`].
43#[derive(Clone, Copy, Eq, PartialEq, Debug)]
44pub enum ToolbarAlignment {
45    Start,
46    Center,
47    End,
48    Baseline,
49    Stretch,
50}
51
52impl ToolbarAlignment {
53    /// The `pf-m-align-items-*` modifier class
54    pub fn align_items_class(&self) -> &'static str {
55        match self {
56            Self::Start => "pf-m-align-items-start",
57            Self::Center => "pf-m-align-items-center",
58            Self::End => "pf-m-align-items-end",
59            Self::Baseline => "pf-m-align-items-baseline",
60            Self::Stretch => "pf-m-align-items-stretch",
61        }
62    }
63
64    /// The `pf-m-align-self-*` modifier class
65    pub fn align_self_class(&self) -> &'static str {
66        match self {
67            Self::Start => "pf-m-align-self-start",
68            Self::Center => "pf-m-align-self-center",
69            Self::End => "pf-m-align-self-end",
70            Self::Baseline => "pf-m-align-self-baseline",
71            Self::Stretch => "pf-m-align-self-stretch",
72        }
73    }
74}
75
76#[derive(Debug, Clone, Copy, PartialEq, Eq)]
77pub enum ToolbarInset {
78    None,
79    Small,
80    Medium,
81    Large,
82    XLarge,
83    XXLarge,
84}
85
86impl AsClasses for ToolbarInset {
87    fn extend_classes(&self, classes: &mut Classes) {
88        classes.push(match self {
89            ToolbarInset::None => "pf-m-inset-none",
90            ToolbarInset::Small => "pf-m-inset-sm",
91            ToolbarInset::Medium => "pf-m-inset-md",
92            ToolbarInset::Large => "pf-m-inset-lg",
93            ToolbarInset::XLarge => "pf-m-inset-xl",
94            ToolbarInset::XXLarge => "pf-m-inset-2xl",
95        });
96    }
97}
98
99/// Properties for [`Toolbar`]
100#[derive(Clone, PartialEq, Properties)]
101pub struct ToolbarProperties {
102    #[prop_or_default]
103    pub class: Classes,
104
105    #[prop_or_default]
106    pub children: ChildrenWithProps<ToolbarContent>,
107
108    #[prop_or_default]
109    pub id: AttrValue,
110
111    #[prop_or_default]
112    pub full_height: bool,
113
114    #[prop_or_default]
115    pub insets: WithBreakpoints<ToolbarInset>,
116
117    /// OUIA Component id
118    #[prop_or_default]
119    pub ouia_id: Option<String>,
120    /// OUIA Component Type
121    #[prop_or(OUIA.component_type())]
122    pub ouia_type: OuiaComponentType,
123    /// OUIA Component Safe
124    #[prop_or(OuiaSafe::TRUE)]
125    pub ouia_safe: OuiaSafe,
126}
127
128/// Toolbar component
129///
130/// > A **toolbar** allows a user to manage and manipulate a data set. Data can be presented in any valid presentation, a table, a list, or a data visualization (chart), for example. The toolbar responsively accommodates controls and displays applied filters in chip groups.
131///
132/// See: <https://www.patternfly.org/components/toolbar>
133///
134/// ## Properties
135///
136/// Defined by [`ToolbarProperties`].
137///
138/// ## Children
139///
140/// The toolbar requires one or more [`ToolbarContent`] children.
141#[function_component(Toolbar)]
142pub fn toolbar(props: &ToolbarProperties) -> Html {
143    let ouia_id = use_memo(props.ouia_id.clone(), |id| {
144        id.clone().unwrap_or(OUIA.generated_id())
145    });
146    let mut class = classes!("pf-v6-c-toolbar", props.class.clone());
147    class.extend_from(&props.insets);
148
149    if props.full_height {
150        class.push("pf-m-full-height")
151    }
152
153    html! (
154        <div
155            id={&props.id}
156            {class}
157            data-ouia-component-id={(*ouia_id).clone()}
158            data-ouia-component-type={props.ouia_type}
159            data-ouia-safe={props.ouia_safe}
160        >
161            { for props.children.iter() }
162        </div>
163    )
164}
165
166/// Properties for [`Toolbar`]
167#[derive(Clone, PartialEq, Properties)]
168pub struct ToolbarContentProperties {
169    #[prop_or_default]
170    pub children: ChildrenRenderer<ToolbarChildVariant>,
171
172    #[prop_or_default]
173    pub id: AttrValue,
174
175    /// Cross-axis alignment of the items in the content section
176    #[prop_or_default]
177    pub align_items: Option<ToolbarAlignment>,
178}
179
180#[function_component(ToolbarContent)]
181pub fn toolbar_content(props: &ToolbarContentProperties) -> Html {
182    let mut section_class = classes!("pf-v6-c-toolbar__content-section");
183    if let Some(align_items) = props.align_items {
184        section_class.push(align_items.align_items_class());
185    }
186
187    html! (
188        <div class="pf-v6-c-toolbar__content" id={&props.id}>
189            <div class={section_class}>{ for props.children.iter() }</div>
190        </div>
191    )
192}
patternfly_yew/components/toolbar/mod.rs

patternfly_yew/components/toolbar/
mod.rs
