patternfly_yew/components/
label.rs

1//! Label
2use crate::prelude::{AsClasses, Button, ButtonVariant, ExtendClasses, Icon};
3use yew::prelude::*;
4
5use strum_macros::{Display, EnumIter, EnumString};
6
7#[derive(Copy, Clone, Default, Display, Debug, PartialEq, Eq, EnumIter, EnumString)]
8pub enum Color {
9    #[default]
10    Grey,
11    Blue,
12    Green,
13    Orange,
14    Red,
15    Purple,
16    Teal,
17    Yellow,
18}
19
20impl AsClasses for Color {
21    fn extend_classes(&self, classes: &mut Classes) {
22        match self {
23            Color::Grey => {}
24            Color::Blue => classes.push("pf-m-blue"),
25            Color::Green => classes.push("pf-m-green"),
26            Color::Orange => classes.push("pf-m-orange"),
27            Color::Red => classes.push("pf-m-red"),
28            Color::Purple => classes.push("pf-m-purple"),
29            Color::Teal => classes.push("pf-m-teal"),
30            Color::Yellow => classes.push("pf-m-yellow"),
31        }
32    }
33}
34
35/// Properties for [`Label`]
36#[derive(Clone, Debug, PartialEq, Properties)]
37pub struct LabelProperties {
38    #[prop_or_default]
39    pub label: String,
40    #[prop_or_default]
41    pub color: Color,
42    #[prop_or_default]
43    pub outline: bool,
44    #[prop_or_default]
45    pub overflow: bool,
46    #[prop_or_default]
47    pub icon: Option<Icon>,
48    #[prop_or_default]
49    pub onclose: Option<Callback<()>>,
50    #[prop_or_default]
51    pub onclick: Option<Callback<()>>,
52    /// Disables the label if it's clickable (if `onclick` is set) or removable (if `onclose` is set).
53    #[prop_or_default]
54    pub disabled: bool,
55    #[prop_or_default]
56    pub compact: bool,
57}
58
59/// Label component
60///
61/// > The **label** component allows users to add specific element captions for user clarity and convenience.
62///
63/// See: <https://www.patternfly.org/components/label/html>
64///
65/// ## Properties
66///
67/// Defined in [`LabelProperties`].
68#[function_component(Label)]
69pub fn label(props: &LabelProperties) -> Html {
70    let mut classes = Classes::from("pf-v6-c-label");
71
72    classes.extend_from(&props.color);
73
74    if props.outline {
75        classes.push("pf-m-outline");
76    }
77
78    if props.overflow {
79        classes.push("pf-m-overflow");
80    }
81
82    if props.compact {
83        classes.push("pf-m-compact");
84    }
85
86    if props.onclick.is_some() {
87        classes.push("pf-m-clickable");
88    }
89
90    if props.disabled {
91        classes.push("pf-m-disabled");
92    }
93
94    let content = |content: Html| {
95        if let Some(onclick) = props.onclick.clone() {
96            let onclick = Callback::from(move |_| onclick.emit(()));
97
98            html! {
99                <button
100                    class="pf-v6-c-label__content pf-m-clickable"
101                    {onclick}
102                    disabled={props.disabled}
103                >
104                    { content }
105                </button>
106            }
107        } else {
108            html! { <span class="pf-v6-c-label__content">{ content }</span> }
109        }
110    };
111
112    html! (
113        <span class={classes}>
114            { content (
115                html!(
116                    <>
117                        if let Some(icon) = &props.icon {
118                            <span class="pf-v6-c-label__icon"> { icon.as_html() } </span>
119                        }
120                        <span class="pf-v6-c-label__text">
121                            { &props.label }
122                        </span>
123                        if let Some(onclose) = &props.onclose {
124                            <span class="pf-v6-c-label__actions">
125                                <Button class={"pf-m-no-padding"} variant={ButtonVariant::Plain} icon={Icon::Times} onclick={onclose.reform(|_| {})} disabled={props.disabled}/>
126                            </span>
127                        }
128                    </>
129                )
130            ) }
131        </span>
132    )
133}
patternfly_yew/components/label.rs

patternfly_yew/components/
label.rs
