基础

Separator 内容分隔线

用于内容分隔线场景的 MoriUI 组件。

资源

组件源码问题反馈

导入 

import { Separator } from 'moriui'

RTL

Separator 的 orientation 不受书写方向影响，周围内容顺序由外围 dir 控制。

示例

概览

水平与垂直分隔线组合。

MoriUI

Vue 组件库

文档组件主题
<script setup lang="ts">
  import { Separator } from 'moriui'
</script>

<template>
  <div class="w-full max-w-sm">
    <div class="space-y-1">
      <h4 class="text-sm font-medium">
        MoriUI
      </h4><p class="text-sm text-muted-foreground">
        Vue 组件库
      </p>
    </div><Separator class="my-4" /><div class="flex h-5 items-center gap-4 text-sm">
      <span>文档</span><Separator orientation="vertical" /><span>组件</span><Separator orientation="vertical" /><span>主题</span>
    </div>
  </div>
</template>

垂直

在同一行内容之间使用 vertical。

概览活动设置
<script setup lang="ts">
  import { Separator } from 'moriui'
</script>

<template>
  <div class="flex h-6 items-center gap-4 text-sm">
    <span>概览</span><Separator orientation="vertical" /><span>活动</span><Separator orientation="vertical" /><span>设置</span>
  </div>
</template>

菜单

分隔相关导航入口。

<script setup lang="ts">
  import { Separator } from 'moriui'
</script>

<template>
  <nav aria-label="账户菜单" class="flex items-center gap-3 text-sm">
    <a href="#profile">资料</a><Separator orientation="vertical" /><a href="#settings">设置</a><Separator orientation="vertical" /><a href="#logout">退出</a>
  </nav>
</template>

列表

在列表条目之间建立视觉边界。

设计系统

组件文档

发布记录 

<script setup lang="ts">
  import { Separator } from 'moriui'
</script>

<template>
  <div class="w-full max-w-sm">
    <p class="py-2 text-sm">
      设计系统
    </p><Separator /><p class="py-2 text-sm">
      组件文档
    </p><Separator /><p class="py-2 text-sm">
      发布记录
    </p>
  </div>
</template>

RTL

在 RTL 导航中使用垂直分隔线。

الرئيسيةالإعدادات
<script setup lang="ts">
  import { Separator } from 'moriui'
</script>

<template>
  <div dir="rtl" class="flex h-6 items-center gap-4 text-sm">
    <span>الرئيسية</span><Separator orientation="vertical" /><span>الإعدادات</span>
  </div>
</template>

API

属性 类型 默认值 说明
orientation'horizontal' | 'vertical''horizontal'分隔线方向，并同步 data-orientation。
decorativebooleanfalse为 true 时使用 role=none 从无障碍树移除。
as / asChildstring | Component / boolean'div' / false来自 Reka Separator 的元素组合能力。

无障碍说明

表达结构边界时保留默认 role=separator；纯装饰分隔线传 decorative。垂直分隔线由 Reka UI 自动提供 aria-orientation=vertical。

关联组件

信息条目内容标注