patternfly_yew/components/toolbar/
item.rs

1use crate::prelude::{
2    AsClasses, ExtendClasses, ToolbarAlignment, ToolbarElementModifier, WithBreakpoints,
3};
4use yew::prelude::*;
5
6/// Properties for [`ToolbarItem`]
7#[derive(Clone, Default, Eq, PartialEq, Debug)]
8pub enum ToolbarItemType {
9    #[default]
10    None,
11    BulkSelect,
12    ChipGroup,
13    OverflowMenu,
14    Pagination,
15    SearchFilter,
16}
17
18impl AsClasses for ToolbarItemType {
19    fn extend_classes(&self, classes: &mut Classes) {
20        match self {
21            Self::None => {}
22            Self::BulkSelect => classes.push("pf-m-bulk-select"),
23            Self::ChipGroup => classes.push("pf-m-chip-group"),
24            Self::OverflowMenu => classes.push("pf-m-overflow-menu"),
25            Self::Pagination => classes.push("pf-m-pagination"),
26            Self::SearchFilter => classes.push("pf-m-search-filter"),
27        }
28    }
29}
30
31#[derive(Clone, PartialEq, Properties)]
32pub struct ToolbarItemProperties {
33    #[prop_or_default]
34    pub id: Option<AttrValue>,
35
36    #[prop_or_default]
37    pub children: Html,
38
39    #[prop_or_default]
40    pub modifiers: WithBreakpoints<ToolbarElementModifier>,
41
42    #[prop_or_default]
43    pub r#type: ToolbarItemType,
44
45    /// Cross-axis alignment of this element within its parent
46    #[prop_or_default]
47    pub align_self: Option<ToolbarAlignment>,
48
49    /// Cross-axis alignment of the children of this element
50    #[prop_or_default]
51    pub align_items: Option<ToolbarAlignment>,
52
53    /// Control the width of the item
54    #[prop_or_default]
55    pub width: WithBreakpoints<String>,
56
57    /// Control the minimal width of the item
58    #[prop_or_default]
59    pub min_width: WithBreakpoints<String>,
60
61    /// Additional classes
62    #[prop_or_default]
63    pub class: Classes,
64}
65
66#[function_component(ToolbarItem)]
67pub fn toolbar_item(props: &ToolbarItemProperties) -> Html {
68    let mut class = classes!("pf-v6-c-toolbar__item");
69
70    class.extend_from(&props.r#type);
71    class.extend_from(&props.modifiers);
72    if let Some(align_self) = props.align_self {
73        class.push(align_self.align_self_class());
74    }
75    if let Some(align_items) = props.align_items {
76        class.push(align_items.align_items_class());
77    }
78    class.extend(props.class.clone());
79
80    let style = props
81        .width
82        .iter()
83        .map(|w| format!("--pf-v6-c-toolbar__item--Width{}: {};", w.on, w.modifier))
84        .chain(
85            props
86                .min_width
87                .iter()
88                .map(|w| format!("--pf-v6-c-toolbar__item--MinWidth{}: {};", w.on, w.modifier)),
89        )
90        .collect::<String>();
91
92    html! (<div id={&props.id} {class} {style}>{ props.children.clone() }</div>)
93}
patternfly_yew/components/toolbar/item.rs

patternfly_yew/components/toolbar/
item.rs
