企业官网建设流程全解析

radix-vue Separator 分割线组件完全指南：属性、无障碍与实战用法

【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue

本篇指南以 radix-vue 仓库（发布名为reka-ui）中的Separator组件文档为主线，系统讲解如何在 Vue 应用中引入、配置和样式化分割线组件。你将掌握orientation、decorative等全部属性的语义，理解其底层渲染逻辑（role="separator"、aria-orientation、data-orientation）以及 WAI-ARIA 无障碍规范要求，并拿到可直接复制的 CSS 与 Tailwind 实战示例。

组件概述

Separator用于在视觉或语义上分隔内容，是布局中高频使用的基础组件。它源自 Radix Vue，现以reka-ui包名发布（见 packages/core/package.json 中的"name": "reka-ui"）。

该组件是原子级、无样式（unstyled）的，所有外观都由使用者通过 class 或 style 自行控制，默认渲染为一个语义上的separator角色元素，供屏幕阅读器等无障碍工具识别。

核心特性

• 支持水平（horizontal）与垂直（vertical）两种方向，通过orientation属性切换；
• 可通过decorative属性将组件声明为纯装饰用途，将其从无障碍树中移除；
• 完整遵守 WAI-ARIA 的separatorrole 规范。

安装

在命令行中安装组件库：

# 安装 radix-vue 的发布包 reka-ui pnpm add reka-ui # 或 npm install reka-ui / yarn add reka-ui

Anatomy（组件结构）

导入组件并将其放入模板中：

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

Separator没有子部件（part）体系，单组件即完成全部功能，这使它在 packages/core/src/Separator/index.ts 中只导出一个默认导出：export { default as Separator, type SeparatorProps } from './Separator.vue'。

API 参考

以下属性定义与 docs/content/meta/Separator.md 中呈现的官方 Props 表一致：

属性背后的实现原理

从 packages/core/src/shared/component/BaseSeparator.vue 的源码可以看到这些属性在底层的真实行为：

• 方向校验与回退：内部通过ORIENTATIONS = ['horizontal', 'vertical']白名单校验orientation，非法值一律回退为'horizontal'（isValidOrientation函数与computedOrientation计算属性）；
• aria-orientation仅在垂直时输出：注释明确指出“aria-orientation默认即 horizontal，因此只有在 vertical 时才需要显式输出”，避免冗余属性；
• 语义属性由decorative驱动：
  • decorative = true时输出role="none"，将元素从无障碍树移除；
  • 否则输出role="separator"与必要的aria-orientation；
• 始终输出data-orientation：无论哪种方向，都会在根元素上绑定data-orientation数据属性，作为样式化的状态钩子。

顶层 packages/core/src/Separator/Separator.vue 仅是薄封装，defineProps中同样以orientation: 'horizontal'作为默认值，并将所有 props 透传给BaseSeparator，同时保留<slot />供自定义内容。

渲染的数据属性

组件会在根元素上暴露如下数据属性，供 CSS 选择器或 Tailwind 变体使用：

无障碍（Accessibility）

组件遵循 WAI-ARIA 1.2 中separatorrole 的要求 使用vitest-axe对默认（水平）与垂直两种渲染结果分别执行axe无障碍扫描，断言toHaveNoViolations()，确保两种方向下都不产生无障碍违规。

实战示例

官方文档页（docs/content/docs/components/separator.md）对应的演示源码分别提供了 CSS 与 Tailwind 两种样式方案，可直接参考使用。

水平分隔线 + 垂直内联分隔

典型场景：标题下方一条水平分割线；导航文本项之间用垂直装饰线隔开。

<script setup> import { Separator } from 'reka-ui' </script> <template> <div style="width: 100%; max-width: 300px; margin: 0 15px"> <div>Reka UI</div> <div style="font-weight: 500">An open-source UI component library.</div> <!-- 水平分割线 --> <Separator class="SeparatorRoot" /> <div style="display: flex; height: 20px; align-items: center"> <div>Blog</div> <!-- 垂直装饰分割线 --> <Separator class="SeparatorRoot" decorative orientation="vertical" /> <div>Docs</div> <Separator class="SeparatorRoot" decorative orientation="vertical" /> <div>Source</div> </div> </div> </template>

CSS 方案

参考 docs/components/demo/Separator/css/styles.css，利用data-orientation数据属性区分横竖样式：

.SeparatorRoot { background-color: var(--grass-6); } .SeparatorRoot[data-orientation='horizontal'] { height: 1px; width: 100%; } .SeparatorRoot[data-orientation='vertical'] { height: 100%; width: 1px; }

要点：Separator本身不提供任何样式，宽度、高度与颜色完全由你定义；水平分隔线需要width: 100%; height: 1px，垂直分隔线需要height: 100%; width: 1px，二者均可通过[data-orientation=...]精确命中。

Tailwind 方案

参考 docs/components/demo/Separator/tailwind/index.vue，使用 Tailwind 的data-*变体一步到位：

<template> <Separator class="bg-stone-300/50 contenteditable="false">【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue