hypersig_ui/
separator.rs

1//! Separators: a line between groups of content.
2
3use hypersig::html::{El, Orientation, div, hr};
4use hypersig::style::Style;
5use hypersig::style::value::{AlignSelf, BorderStyle, px};
6
7use crate::token;
8
9/// A one-pixel line in [`token::border`] that runs along `orientation`.
10///
11/// A horizontal one is an `<hr>`, and a vertical one is a `<div>` with
12/// `role="separator"` and `aria-orientation="vertical"`, so that a screen
13/// reader announces both as separators.
14///
15/// ```
16/// use hypersig::html::Orientation;
17/// use hypersig::Signals;
18/// use hypersig_ui::separator;
19/// use serde::{Deserialize, Serialize};
20///
21/// #[derive(Signals, Serialize, Deserialize)]
22/// struct App {}
23///
24/// let line = separator::<App>(Orientation::Vertical);
25/// assert!(line.render().contains(r#"aria-orientation="vertical""#));
26/// ```
27#[must_use]
28pub fn separator<S>(orientation: Orientation) -> El<S> {
29    let line = Style::new()
30        .flex_shrink(0.0)
31        .border_style(BorderStyle::None)
32        .background_color(token::border().var());
33    match orientation {
34        Orientation::Vertical => div()
35            .attr("role", "separator")
36            .attr("aria-orientation", "vertical")
37            .css(line.width(px(1)).align_self(AlignSelf::Stretch)),
38        _ => hr().css(line.height(px(1)).width(hypersig::style::value::pct(100))),
39    }
40}
hypersig_ui/separator.rs

hypersig_ui/
separator.rs
