Lzh on GitHub

Separator

从视觉或语义上分离内容。
<script setup lang="ts">
import { Separator } from 'reka-ui'
</script>

<template>
  <div class="w-full max-w-[300px] mx-[15px]">
    <div class="text-stone-700 dark:text-white text-sm leading-5 font-semibold">
      Reka UI
    </div>
    <div class="text-stone-700 dark:text-white text-sm leading-5">
      An open-source UI component library.
    </div>
    <Separator
      class="bg-stone-300/50 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-stone-700 dark:text-white text-sm leading-5">
        Blog
      </div>
      <Separator
        class="bg-stone-300/50 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-stone-700 dark:text-white text-sm leading-5">
        Docs
      </div>
      <Separator
        class="bg-stone-300/50 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-stone-700 dark:text-white text-sm leading-5">
        Source
      </div>
    </div>
  </div>
</template>

功能特点

  • 支持水平和垂直方向。

安装

从命令行安装组件。

$ npm add reka-ui

结构

导入所有部分并将其组合在一起。

<script setup>
  import { Separator } from 'reka-ui'
</script>

<template>
  <Separator />
</template>

API 参考

Root

分隔线。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
decorativefalseboolean组件是否纯粹是装饰性的。当为 true 时，辅助功能相关的属性会更新，以便渲染的元素从辅助功能树中移除。
orientation'horizontal''vertical' | 'horizontal'组件的方向。可以是 vertical 或 horizontal。默认为 horizontal。

数据属性

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

可访问性

遵循 separator 角色要求。