Separator

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a separator line.

  • Rust UI Icons - CopyCopy Demo

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 --force
ui add demo_separator
ui add separator

Update 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

use crate::components::ui::separator::Separator;

<Separator />
Rust UI Icons - ChevronLeftSelect NativeSheetRust UI Icons - ChevronRight