Dioxus Componentsdioxus

One thing

Another thing

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::separator::{self, SeparatorProps};
use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};

#[component]
pub fn Separator(props: SeparatorProps) -> Element {
    let base = attributes!(div {
        class: "dx-separator",
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/separator/style.css") }
        separator::Separator {
            horizontal: props.horizontal,
            decorative: props.decorative,
            attributes: merged,
            {props.children}
        }
    }
}

Usage notes

The Separator component is a simple horizontal or vertical line that can be used to visually separate content in your application.

Component Structure

// The Separator component can be oriented horizontally or vertically.
Separator {
    // The orientation of the separator line. true for horizontal, false for vertical.
    horizontal: true,
    // The decorative property controls if the separator is decorative and should not be visible to screen readers.
    decorative: false,
}