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! (<dl id={&props.id} {class} style={props.style.clone()}>{ props.children.clone() }</dl>)
134}
135
136/// Properties for [`DescriptionGroup`]
137#[derive(Properties, Clone, Debug, PartialEq)]
138pub struct DescriptionGroupProperties {
139    /// The term to describe
140    pub term: AttrValue,
141    /// The definition
142    #[prop_or_default]
143    pub children: Html,
144}
145
146/// A [`DescriptionList`] entry.
147#[function_component(DescriptionGroup)]
148pub fn desc_group(props: &DescriptionGroupProperties) -> Html {
149    html! (
150        <div class="pf-v6-c-description-list__group">
151            <dt class="pf-v6-c-description-list__term">
152                <span class="pf-v6-c-description-list__text">{ &props.term }</span>
153            </dt>
154            <dd class="pf-v6-c-description-list__description">
155                <div class="pf-v6-c-description-list__text">{ props.children.clone() }</div>
156            </dd>
157        </div>
158    )
159}
patternfly_yew/components/description_list.rs

patternfly_yew/components/
description_list.rs
