fc_dioxus/components/
description_list.rs

1//! Term and value pairs, from description-list.css.
2use crate::{
3    core::{assets, attrs::component_attributes},
4    prelude::*,
5    theme::use_stylesheets,
6};
7const BEM: Bem = Bem::new("fc-dl");
8fc_modifier! {
9    /// How terms sit relative to their values.
10    pub enum DlLayout for BEM {
11        /// Term and value side by side, falling back to stacked when narrow.
12        Columns => None,
13        /// Term above value.
14        Stacked => "stacked",
15    }
16}
17fc_modifier! { enum DlRule for BEM { Plain => None, Divided => "divided" } }
18
19/// A native `<dl>` of [`DescriptionItem`]s.
20#[component]
21pub fn DescriptionList(
22    #[props(default)] layout: DlLayout,
23    #[props(default)] divided: bool,
24    #[props(default)] class: Option<String>,
25    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
26    children: Element,
27) -> Element {
28    let classes = ClassList::new(BEM.block())
29        .with_modifier(BEM, layout)
30        .with_modifier(
31            BEM,
32            if divided {
33                DlRule::Divided
34            } else {
35                DlRule::Plain
36            },
37        )
38        .extend(class.as_deref());
39    let attributes = component_attributes(attributes, classes, &[]);
40    rsx! {
41        if use_stylesheets() { document::Stylesheet { href: assets::COMPONENTS_DESCRIPTION_LIST_CSS } }
42        dl { ..attributes, {children} }
43    }
44}
45
46/// One term and its value. `numeric` aligns the value's figures for comparison.
47#[component]
48pub fn DescriptionItem(
49    term: Element,
50    #[props(default)] numeric: bool,
51    children: Element,
52) -> Element {
53    rsx! {
54        div { class: BEM.element("item"),
55            dt { {term} }
56            dd { class: numeric.then(|| BEM.element("num")), {children} }
57        }
58    }
59}
fc_dioxus/components/description_list.rs

fc_dioxus/components/
description_list.rs
