Separator
Rust UI component that displays a separator line.
Rust UI
An open-source UI component library 🦀.
Blog
Docs
Source
use leptos::prelude::*;
use crate::components::ui::headings::H3;
use crate::components::ui::separator::{Separator, SeparatorOrientation};
#[component]
pub fn DemoSeparator() -> impl IntoView {
view! {
<div class="flex flex-col gap-4">
<H3>"Rust UI"</H3>
<p>"An open-source UI component library 🦀."</p>
<Separator />
<div class="flex gap-4 items-center h-5">
<p>"Blog"</p>
<Separator orientation=SeparatorOrientation::Vertical />
<p>"Docs"</p>
<Separator orientation=SeparatorOrientation::Vertical />
<p>"Source"</p>
</div>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_separatorui add separatorUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/separator.rs
use leptos::prelude::*;
use tw_merge::*;
#[component]
pub fn Separator(
#[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
#[prop(into, optional)] class: Signal<String>,
// children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let orientation = orientation.get();
let separator = SeparatorClass { orientation };
separator.with_class(class.get())
});
view! { <div class=class role="separator" /> }
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* 🧬 STRUCT 🧬 */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[derive(TwClass, Default)]
#[tw(class = "shrink-0 bg-border")]
pub struct SeparatorClass {
orientation: SeparatorOrientation,
}
#[derive(TwVariant)]
pub enum SeparatorOrientation {
#[tw(default, class = "w-full h-[1px]")]
Default,
#[tw(class = "h-full w-[1px]")]
Vertical,
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀