patternfly_yew/components/
divider.rs

1//! General purpose dividers
2
3use crate::prelude::{AsClasses, ExtendClasses, Inset, Visibility, WithBreakpoints};
4use yew::prelude::*;
5
6#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
7pub enum DividerType {
8    /// Use an `<hr>` element.
9    #[default]
10    Hr,
11    /// Use an `<li>` element.
12    Li,
13    /// Use a `<div>` element.
14    Div,
15}
16
17#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
18pub enum DividerOrientation {
19    #[default]
20    Horizontal,
21    Vertical,
22}
23
24impl AsClasses for DividerOrientation {
25    fn extend_classes(&self, classes: &mut Classes) {
26        match self {
27            Self::Horizontal => classes.push(classes!("pf-m-horizontal")),
28            Self::Vertical => classes.push(classes!("pf-m-vertical")),
29        }
30    }
31}
32
33/// Properties for [`Divider`]
34#[derive(Clone, Debug, PartialEq, Eq, Properties)]
35pub struct DividerProperties {
36    #[prop_or_default]
37    pub r#type: DividerType,
38    #[prop_or_default]
39    pub orientation: WithBreakpoints<DividerOrientation>,
40    #[prop_or_default]
41    pub inset: WithBreakpoints<Inset>,
42    #[prop_or_default]
43    pub visibility: WithBreakpoints<Visibility>,
44}
45
46/// Divider component
47///
48/// > A **divider** is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.
49///
50/// See: <https://www.patternfly.org/components/divider>
51///
52/// ## Properties
53///
54/// Defined by [`DividerProperties`].
55#[function_component(Divider)]
56pub fn divider(props: &DividerProperties) -> Html {
57    let mut class = classes!("pf-v5-c-divider");
58
59    class.extend_from(&props.orientation);
60    class.extend_from(&props.inset);
61    class.extend_from(&props.visibility);
62
63    match props.r#type {
64        DividerType::Hr => html! (<hr {class} />),
65        DividerType::Li => html! (<li {class} role="separator"></li>),
66        DividerType::Div => html! (<div {class} role="separator"></div>),
67    }
68}
69
70/// Specialized list divider component
71///
72/// This component is normally used as part of a list of items, like as part of the
73/// [`AppLauncher`](crate::prelude::AppLauncher).
74///
75/// ## Properties
76///
77/// This component does not have properties.
78#[function_component(ListDivider)]
79pub fn list_divider() -> Html {
80    html!(<Divider r#type={DividerType::Li} />)
81}
patternfly_yew/components/divider.rs

patternfly_yew/components/
divider.rs
