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

patternfly_yew/components/
simple_list.rs
