patternfly_yew/components/
chip_group.rs

1//! Chip Group
2
3use crate::prelude::wrap::wrapper_elt_with_attributes;
4use crate::prelude::{use_prop_id, Chip};
5use yew::prelude::*;
6use yew::virtual_dom::ApplyAttributeAs;
7
8#[derive(Clone, Debug, PartialEq, Properties)]
9pub struct ChipGroupProperties {
10    #[prop_or_default]
11    pub children: ChildrenWithProps<Chip>,
12
13    #[prop_or_default]
14    pub id: Option<String>,
15
16    #[prop_or_default]
17    pub label: Option<String>,
18
19    #[prop_or("Chip group list".into())]
20    pub aria_label: AttrValue,
21}
22
23#[function_component(ChipGroup)]
24pub fn chip_group(props: &ChipGroupProperties) -> Html {
25    let id = use_prop_id(props.id.clone());
26
27    let (aria_label, aria_labelled_by) = match props.label.is_some() {
28        true => (AttrValue::default(), Some(id.to_string())),
29        false => (props.aria_label.clone(), None),
30    };
31
32    let mut class = classes!("pf-v5-c-chip-group");
33
34    if props.label.is_some() {
35        class.push(classes!("pf-m-category"));
36    }
37
38    html! (
39        <div {class}>
40            <div class="pf-v5-c-chip-group__main">
41                if let Some(label) = &props.label {
42                    <span
43                        class="pf-v5-c-chip-group__label"
44                        aria-hidden="true"
45                        id={format!("{id}-label")}
46                    >
47                        { &label }
48                    </span>
49                }
50                <ul
51                    class="pf-v5-c-chip-group__list"
52                    role="list"
53                    aria-label={aria_label}
54                    aria-labelledby={aria_labelled_by}
55                >
56                    { for props.children.iter().map(|chip| {
57                        wrapper_elt_with_attributes(chip.to_html(), "li", &[("class", "pf-v5-c-chip-group__list-item", ApplyAttributeAs::Attribute)])
58                    })}
59                </ul>
60            </div>
61        </div>
62    )
63}
patternfly_yew/components/chip_group.rs

patternfly_yew/components/
chip_group.rs
