Separator
Visually or semantically separates content.
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
vue
<script setup lang="ts">
import { Separator } from 'radix-vue'
</script>
<template>
<div class="w-full max-w-[300px] mx-[15px]">
<div class="text-white text-[15px] leading-5 font-semibold">
Radix Primitives
</div>
<div class="text-white text-[15px] leading-5">
An open-source UI component library.
</div>
<Separator
class="bg-[#d7cff9] 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-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative
orientation="vertical"
/>
<div class="text-white text-[15px] leading-5">
Docs
</div>
<Separator
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
decorative
orientation="vertical"
/>
<div class="text-white text-[15px] leading-5">
Source
</div>
</div>
</div>
</template>
Features
- Supports horizontal and vertical orientations.
Installation
Install the component from your command line.
sh
$ npm add radix-vue
Anatomy
Import all parts and piece them together.
vue
<script setup>
import { Separator } from 'radix-vue'
</script>
<template>
<Separator />
</template>
API Reference
Root
The separator.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
decorative | boolean Whether or not the component is purely decorative. | |
orientation | 'horizontal' | 'vertical' | 'horizontal' Orientation of the component. Either |
Data Attribute | Value |
---|---|
[data-orientation] | "vertical" | "horizontal" |
Accessibility
Adheres to the separator
role requirements.