Visually or semantically separates content.
use leptos::*;
use radix_leptos_separator::*;
#[component]
pub fn SeparatorDemo() -> impl IntoView {
view! {
<div class="w-full max-w-[300px] mx-[15px]">
<div class="text-white text-[15px] leading-5 font-medium">Radix Primitives</div>
<div class="text-white text-[15px] leading-5">An open-source UI component library.</div>
<Separator
attr:class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
/>
<div class="flex h-5 items-center">
<div class="text-white text-[15px] leading-5">Blog</div>
<Separator
attr:class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative=true
orientation=Orientation::Vertical
/>
<div class="text-white text-[15px] leading-5">Docs</div>
<Separator
attr:class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative=true
orientation=Orientation::Vertical
/>
<div class="text-white text-[15px] leading-5">Source</div>
</div>
</div>
}
}
use radix_yew_separator::*;
use yew::prelude::*;
#[function_component]
pub fn SeparatorDemo() -> Html {
html! {
<div class="w-full max-w-[300px] mx-[15px]">
<div class="text-white text-[15px] leading-5 font-medium">{"Radix Primitives"}</div>
<div class="text-white text-[15px] leading-5">{"An open-source UI component library."}</div>
<Separator class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]" />
<div class="flex h-5 items-center">
<div class="text-white text-[15px] leading-5">{"Blog"}</div>
<Separator
class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative=true
orientation={Orientation::Vertical}
/>
<div class="text-white text-[15px] leading-5">{"Docs"}</div>
<Separator
class="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative=true
orientation={Orientation::Vertical}
/>
<div class="text-white text-[15px] leading-5">{"Source"}</div>
</div>
</div>
}
}
- Supports horizontal and vertical orientations.
Install the component from your command line.
cargo add radix-leptos-separator
cargo add radix-yew-separator
Import the component.
use leptos::*;
use radix_leptos_separator::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<Separator />
}
}
use radix_yew_separator::*;
use yew::prelude::*;
#[component]
fn Anatomy() -> Html {
html! {
<Separator />
}
}
The separator.
| Prop | Type | Default |
|---|
as_child | MaybeProp<bool> | false |
orientation | MaybeProp<Orientation> | Orientation::Horizontal |
decorative | MaybeProp<bool> | false |
| Prop | Type | Default |
|---|
as_child | Option<Callback<SeparatorChildProps, Html>> | - |
orientation | Orientation | Orientation::Horizontal |
decorative | bool | false |
| Data attribute | Values |
|---|
[data-orientation] | "horizontal" | "vertical" |
Adheres to the separator role requirements.