Separator
Holt UI
An open-source UI component library.
Docs
Source
Blog
Documentation
A visual divider to separate content
use leptos::prelude::*;
/// Orientation options for the separator
#[derive(Copy, Clone, PartialEq, Default)]
pub enum Orientation {
#[default]
Horizontal,
Vertical,
}
/// A separator or divider that can be used to separate content
#[component]
pub fn Separator(
#[prop(optional, into)] class: String,
#[prop(optional)] orientation: Orientation,
) -> impl IntoView {
let classes = {
let base_class = match orientation {
Orientation::Horizontal => "h-[1px] w-full shrink-0 bg-border",
Orientation::Vertical => "h-full w-[1px] shrink-0 bg-border",
};
if class.is_empty() {
base_class.to_string()
} else {
format!("{base_class} {class}")
}
};
let orientation_attr = match orientation {
Orientation::Horizontal => "horizontal",
Orientation::Vertical => "vertical",
};
view! { <div class=classes role="separator" aria-orientation=orientation_attr /> }
}
#[cfg(test)]
mod tests {
use super::*;
#[test]
fn class_prop_accepts_str_and_string() {
assert_class_prop!(SeparatorProps);
}
}
Click to expand