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, Display, Debug, PartialEq, Eq, EnumIter, EnumString)]
8pub enum Color {
9    Grey,
10    Blue,
11    Green,
12    Orange,
13    Red,
14    Purple,
15    Cyan,
16    Gold,
17}
18
19impl Default for Color {
20    fn default() -> Self {
21        Self::Grey
22    }
23}
24
25impl AsClasses for Color {
26    fn extend_classes(&self, classes: &mut Classes) {
27        match self {
28            Color::Grey => {}
29            Color::Blue => classes.push("pf-m-blue"),
30            Color::Green => classes.push("pf-m-green"),
31            Color::Orange => classes.push("pf-m-orange"),
32            Color::Red => classes.push("pf-m-red"),
33            Color::Purple => classes.push("pf-m-purple"),
34            Color::Cyan => classes.push("pf-m-cyan"),
35            Color::Gold => classes.push("pf-m-gold"),
36        }
37    }
38}
39
40/// Properties for [`Label`]
41#[derive(Clone, Debug, PartialEq, Properties)]
42pub struct LabelProperties {
43    #[prop_or_default]
44    pub label: String,
45    #[prop_or_default]
46    pub color: Color,
47    #[prop_or_default]
48    pub outline: bool,
49    #[prop_or_default]
50    pub overflow: bool,
51    #[prop_or_default]
52    pub icon: Option<Icon>,
53    #[prop_or_default]
54    pub onclose: Option<Callback<()>>,
55    #[prop_or_default]
56    pub href: String,
57    #[prop_or_default]
58    pub compact: bool,
59}
60
61/// Label component
62///
63/// > The **label** component allows users to add specific element captions for user clarity and convenience.
64///
65/// See: <https://www.patternfly.org/components/label/html>
66///
67/// ## Properties
68///
69/// Defined in [`LabelProperties`].
70#[function_component(Label)]
71pub fn label(props: &LabelProperties) -> Html {
72    let mut classes = Classes::from("pf-v5-c-label");
73
74    classes.extend_from(&props.color);
75
76    if props.outline {
77        classes.push("pf-m-outline");
78    }
79
80    if props.overflow {
81        classes.push("pf-m-overflow");
82    }
83
84    if props.compact {
85        classes.push("pf-m-compact");
86    }
87
88    let content = |content: Html| {
89        if props.href.is_empty() {
90            html! {<span class="pf-v5-c-label__content">{content}</span>}
91        } else {
92            html! {<a class="pf-v5-c-label__content" href={props.href.clone()}>{content}</a>}
93        }
94    };
95
96    html! (
97        <span class={classes}>
98            { content (
99                html!(
100                    <>
101                        if let Some(icon) = &props.icon {
102                            <span class="pf-v5-c-label__icon"> { icon.as_html() } </span>
103                        }
104                        <span class="pf-v5-c-label__text">
105                            { &props.label }
106                        </span>
107                    </>
108                )
109            )}
110            if let Some(onclose) = &props.onclose {
111                <span class="pf-v5-c-label__actions">
112                    <Button variant={ButtonVariant::Plain} icon={Icon::Times} onclick={onclose.reform(|_| {})}/>
113                </span>
114            }
115        </span>
116    )
117}
patternfly_yew/components/label.rs

patternfly_yew/components/
label.rs
