Loongship UI

Appearance

Separator 分割线 ​

分隔有层级或不同类型的内容。

命令行安装 ​

bash
npx @loongship-kit/ui add separator

水平分割线 ​

Section Above
Section Below
查看代码
vue
<script setup lang="ts">
import { Separator } from '@/components/loongship/separator'
</script>

<template>
  <div>
    <span>Section Above</span>
    <Separator orientation="horizontal" />
    <span>Section Below</span>
  </div>
</template>

垂直分割线 ​

Blog
Docs
Source
查看代码
vue
<template>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span>Blog</span>
    <Separator orientation="vertical" />
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Source</span>
  </div>
</template>

语义分隔 ​

语义分隔线需关闭 decorative

默认 decorative 为 true，仅提供视觉分隔。当分割线表达内容结构时设置为 false，此时会向无障碍树暴露 separator 角色。

Voyage detailsPort calls
查看代码
vue
<template>
  <strong>Voyage details</strong>
  <Separator :decorative="false" aria-label="Voyage details end" />
  <strong>Port calls</strong>
</template>

API ​

属性 ​

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'分割线方向
decorativebooleantrue是否从无障碍树中隐藏语义
asstring | Component'div'渲染元素
asChildbooleanfalse将属性和样式合并到唯一子元素
classClassValue-自定义类名

插槽 ​

无内容插槽。