分隔线

在视觉上或语义上分隔内容。

Radix Primitives

一个开源的 UI 组件库。

博客

文档

来源

<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>

功能

• 支持水平和垂直方向。

安装

从命令行安装组件。

$ npm add radix-vue

剖析

导入所有部分并将它们拼凑在一起。

<script setup>
import { Separator } from 'radix-vue'
</script>

<template>
  <Separator />
</template>

API 参考

根

分隔符。

道具	默认值	类型
as	'div'	AsTag | 组件 此组件应渲染为的元素或组件。 可以被 asChild 覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
装饰性的		布尔值 组件是否纯粹装饰性的。 当 true 时，与无障碍性相关的属性会更新，以便从无障碍性树中删除渲染的元素。
方向	'horizontal'	'vertical' | 'horizontal' 组件的方向。 可以是 vertical 或 horizontal。 默认值为 horizontal。

数据属性	价值
[data-orientation]	"vertical" | "horizontal"

无障碍性

符合 separator 角色要求。