patternfly_yew/components/
description_list.rs

1//! Description list
2use crate::core::WithBreakpoints;
3use crate::prelude::{AsClasses, ExtendClasses};
4use yew::prelude::*;
5
6/// Properties for [`DescriptionList`]
7#[derive(Properties, Clone, Debug, PartialEq)]
8pub struct DescriptionListProperties {
9    #[prop_or_default]
10    pub id: AttrValue,
11
12    #[prop_or_default]
13    pub style: Option<AttrValue>,
14
15    #[prop_or_default]
16    pub children: Html,
17
18    #[prop_or_default]
19    pub mode: WithBreakpoints<DescriptionListMode>,
20
21    #[prop_or_default]
22    pub compact: bool,
23
24    #[prop_or_default]
25    pub auto_column_widths: bool,
26
27    #[prop_or_default]
28    pub fill_columns: bool,
29
30    #[prop_or_default]
31    pub inline_grid: bool,
32
33    #[prop_or_default]
34    pub auto_fit: bool,
35
36    #[prop_or_default]
37    pub columns: WithBreakpoints<DescriptionListColumns>,
38}
39
40#[derive(Copy, Clone, Debug, Default, Eq, PartialEq)]
41pub enum DescriptionListColumns {
42    #[default]
43    One,
44    Two,
45    Three,
46}
47
48impl AsClasses for DescriptionListColumns {
49    fn extend_classes(&self, classes: &mut Classes) {
50        match self {
51            Self::One => classes.extend(classes!("pf-m-1-col")),
52            Self::Two => classes.extend(classes!("pf-m-2-col")),
53            Self::Three => classes.extend(classes!("pf-m-3-col")),
54        }
55    }
56}
57
58#[derive(Copy, Clone, Debug, Default, Eq, PartialEq)]
59pub enum DescriptionListMode {
60    #[default]
61    Vertical,
62    Horizontal,
63    Fluid,
64}
65
66impl AsClasses for DescriptionListMode {
67    fn extend_classes(&self, classes: &mut Classes) {
68        match self {
69            Self::Vertical => {}
70            Self::Horizontal => classes.extend(classes!("pf-m-horizontal")),
71            Self::Fluid => classes.extend(classes!("pf-m-horizontal", "pf-m-fluid")),
72        }
73    }
74}
75
76/// The Description list component.
77///
78/// > A **description list** contains terms and their corresponding descriptions.
79///
80/// See: <https://www.patternfly.org/components/description-list>
81///
82/// ## Properties
83///
84/// Defined by [`DescriptionListProperties`]. The component only has children.
85///
86/// ## Example
87///
88/// ```rust
89/// use patternfly_yew::prelude::*;
90/// use yew::prelude::*;
91///
92/// #[function_component(Example)]
93/// pub fn example() -> Html {
94///   html!(
95///     <DescriptionList>
96///       <DescriptionGroup term="42">{"Answer to the Ultimate Question of Life, The Universe, and Everything"}</DescriptionGroup>
97///     </DescriptionList>
98///   )
99/// }
100/// ```
101#[function_component(DescriptionList)]
102pub fn dl(props: &DescriptionListProperties) -> Html {
103    let mut class = Classes::from("pf-v6-c-description-list");
104
105    class.extend_from(&props.mode);
106
107    if props.compact {
108        class.extend(classes!("pf-m-compact"));
109    }
110
111    if props.auto_column_widths {
112        class.extend(classes!("pf-m-auto-column-widths"));
113    }
114
115    if props.fill_columns {
116        class.extend(classes!(
117            "pf-m-2-col",
118            "pf-m-3-col-on-lg",
119            "pf-m-fill-columns"
120        ));
121    }
122
123    if props.inline_grid {
124        class.extend(classes!("pf-m-inline-grid"));
125    }
126
127    if props.auto_fit {
128        class.extend(classes!("pf-m-auto-fit"));
129    }
130
131    class.extend_from(&props.columns);
132
133    html! (
134        <dl
135            id={ &props.id }
136            {class}
137            style={ props.style.clone() }
138        >
139            { props.children.clone() }
140        </dl>
141    )
142}
143
144/// Properties for [`DescriptionGroup`]
145#[derive(Properties, Clone, Debug, PartialEq)]
146pub struct DescriptionGroupProperties {
147    /// The term to describe
148    pub term: AttrValue,
149    /// The definition
150    #[prop_or_default]
151    pub children: Html,
152}
153
154/// A [`DescriptionList`] entry.
155#[function_component(DescriptionGroup)]
156pub fn desc_group(props: &DescriptionGroupProperties) -> Html {
157    html! (
158        <div class="pf-v6-c-description-list__group">
159            <dt class="pf-v6-c-description-list__term">
160                <span class="pf-v6-c-description-list__text">
161                    { &props.term }
162                </span>
163            </dt>
164            <dd class="pf-v6-c-description-list__description">
165                <div class="pf-v6-c-description-list__text">
166                    { props.children.clone() }
167                </div>
168            </dd>
169        </div>
170    )
171}
patternfly_yew/components/description_list.rs

patternfly_yew/components/
description_list.rs
