ui_storybook/components/primitives/
divider.rs

1//! `Divider` — thin separator line (M-UI.1 / AUT-121).
2//!
3//! Used to separate groups inside menus, sidebars, and panels. Vertical
4//! variant for inline toolbar separators.
5
6use leptos::prelude::*;
7
8/// Divider orientation.
9#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
10pub enum DividerOrientation {
11    /// Spans horizontally; takes the full width of its container.
12    #[default]
13    Horizontal,
14    /// Spans vertically; takes the full height of its container.
15    /// 1px wide. Use inside flex rows for inline separators.
16    Vertical,
17}
18
19impl DividerOrientation {
20    /// CSS class for the orientation.
21    #[must_use]
22    pub fn css(self) -> &'static str {
23        match self {
24            DividerOrientation::Horizontal => "divider-h",
25            DividerOrientation::Vertical => "divider-v",
26        }
27    }
28}
29
30#[component]
31pub fn Divider(
32    #[prop(optional)] orientation: DividerOrientation,
33    #[prop(optional, into)] extra_class: String,
34) -> impl IntoView {
35    let class = format!(
36        "divider {}{}{}",
37        orientation.css(),
38        if extra_class.is_empty() { "" } else { " " },
39        extra_class,
40    );
41    view! { <div class=class role="separator"></div> }
42}
ui_storybook/components/primitives/divider.rs

ui_storybook/components/primitives/
divider.rs
