patternfly_yew/components/
dl.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-v5-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!("pf-m-fill-columns"));
117    }
118
119    if props.inline_grid {
120        class.extend(classes!("pf-m-inline-grid"));
121    }
122
123    if props.auto_fit {
124        class.extend(classes!("pf-m-auto-fit"));
125    }
126
127    class.extend_from(&props.columns);
128
129    html! (
130        <dl
131            id={ &props.id }
132            {class}
133            style={ props.style.clone() }
134        >
135            { props.children.clone() }
136        </dl>
137    )
138}
139
140/// Properties for [`DescriptionGroup`]
141#[derive(Properties, Clone, Debug, PartialEq)]
142pub struct DescriptionGroupProperties {
143    /// The term to describe
144    pub term: AttrValue,
145    /// The definition
146    #[prop_or_default]
147    pub children: Html,
148}
149
150/// A [`DescriptionList`] entry.
151#[function_component(DescriptionGroup)]
152pub fn desc_group(props: &DescriptionGroupProperties) -> Html {
153    html! (
154        <div class="pf-v5-c-description-list__group">
155            <dt class="pf-v5-c-description-list__term">
156                <span class="pf-v5-c-description-list__text">
157                    { &props.term }
158                </span>
159            </dt>
160            <dd class="pf-v5-c-description-list__description">
161                <div class="pf-v5-c-description-list__text">
162                    { props.children.clone() }
163                </div>
164            </dd>
165        </div>
166    )
167}
patternfly_yew/components/dl.rs

patternfly_yew/components/
dl.rs
