Radix VueSeparator
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.
bash
npm install radix-vueAnatomy
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 | Type | Default |
|---|---|---|
orientation | enum | "horizontal" |
decorative | boolean | |
as | string | Component | div |
asChild | boolean | false |
| Data Attribute | Value |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
Accessibility
Adheres to the separator role requirements.