patternfly_yew/components/
simple_list.rs

1use crate::prelude::ButtonType;
2use yew::prelude::*;
3
4/// Component for selecting an item out of a list.
5/// Does not support grouping.
6/// If you are looking for a grouped version then use
7/// [`SimpleListGrouped`].
8#[derive(Debug, Clone, PartialEq, Properties)]
9pub struct SimpleListProperties {
10    /// The items from which can be selected.
11    #[prop_or_default]
12    pub children: ChildrenWithProps<SimpleListItem>,
13    /// Additional classes to add to the list.
14    #[prop_or_default]
15    pub class: Classes,
16}
17
18#[function_component(SimpleList)]
19pub fn simple_list(props: &SimpleListProperties) -> Html {
20    html! {
21        <SimpleListInner class={props.class.clone()}>
22            <ul class={"pf-v5-c-simple-list__list"} role="list">
23                { for props.children.iter() }
24            </ul>
25        </SimpleListInner>
26    }
27}
28
29/// Component for selecting an item out of groups of lists.
30/// If you are looking for a non-grouped version then use
31/// [`SimpleList`].
32#[derive(Debug, Clone, PartialEq, Properties)]
33pub struct SimpleListGroupedProperties {
34    /// The groups (which contain their items) from which can be selected.
35    #[prop_or_default]
36    pub children: ChildrenWithProps<SimpleListGroup>,
37    /// Additional classes to add to the list.
38    #[prop_or_default]
39    pub class: Classes,
40}
41
42#[function_component(SimpleListGrouped)]
43pub fn simple_list_grouped(props: &SimpleListGroupedProperties) -> Html {
44    html! {
45        <SimpleListInner class={props.class.clone()}>
46            {for props.children.iter()}
47        </SimpleListInner>
48    }
49}
50
51#[derive(Debug, Clone, PartialEq, Properties)]
52struct SimpleListInnerProperties {
53    #[prop_or_default]
54    children: Html,
55    #[prop_or_default]
56    class: Classes,
57}
58
59#[function_component(SimpleListInner)]
60fn simple_list_inner(props: &SimpleListInnerProperties) -> Html {
61    let class = classes!("pf-v5-c-simple-list", props.class.clone());
62    html! {
63        <div {class}>{props.children.clone()}</div>
64    }
65}
66
67/// A single item which can be selected in a [`SimpleList`].
68#[derive(Debug, Clone, PartialEq, Properties)]
69pub struct SimpleListItemProperties {
70    /// The content to be rendered inside the item.
71    #[prop_or_default]
72    pub children: Html,
73    /// Additional classes to pass to the item.
74    #[prop_or_default]
75    pub class: Classes,
76    /// Additional classes to pass to the underlying button.
77    #[prop_or_default]
78    pub button_class: Classes,
79    /// Whether the item is currently selected or not.
80    #[prop_or_default]
81    pub active: bool,
82    /// Callback that is triggered when this item is clicked.
83    #[prop_or_default]
84    pub onclick: Callback<MouseEvent>,
85    /// Type of the underlying button.
86    #[prop_or_default]
87    pub r#type: ButtonType,
88}
89
90#[function_component(SimpleListItem)]
91pub fn simple_list_item(props: &SimpleListItemProperties) -> Html {
92    let class = classes!(props.class.clone(), "pf-v5-c-simple-list__item");
93    let mut button_class = classes!(props.button_class.clone(), "pf-v5-c-simple-list__item-link");
94    if props.active {
95        button_class.push("pf-m-current");
96    }
97    html! {
98        <li {class}>
99            <button class={button_class} onclick={props.onclick.clone()} type="button">
100                {props.children.clone()}
101            </button>
102        </li>
103    }
104}
105
106/// A group organizing [`SimpleListItem`]s in a [`SimpleListGrouped`].
107#[derive(Debug, Clone, PartialEq, Properties)]
108pub struct SimpleListGroupProperties {
109    /// The items that are part of this group.
110    #[prop_or_default]
111    pub children: ChildrenWithProps<SimpleListItem>,
112    /// Additional classes to pass to the group.
113    #[prop_or_default]
114    pub class: Classes,
115    /// Additional classes to pass to the title.
116    #[prop_or_default]
117    pub title_class: Classes,
118    /// The title of the group.
119    #[prop_or_default]
120    pub title: Html,
121}
122
123#[function_component(SimpleListGroup)]
124pub fn simple_list_group(props: &SimpleListGroupProperties) -> Html {
125    let title_class = classes!(props.title_class.clone(), "pf-v5-c-simple-list__title");
126    let class = classes!(props.class.clone(), "pf-v5-c-simple-list__list");
127    html! {
128        <section class="pf-v5-c-simple-list__section">
129            <h2 class={title_class}>{props.title.clone()}</h2>
130            <ul {class} role="list">
131                {for props.children.iter()}
132            </ul>
133        </section>
134    }
135}
patternfly_yew/components/simple_list.rs

patternfly_yew/components/
simple_list.rs
