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

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等全部属性的语义理解其底层渲染逻辑roleseparator、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-uiAnatomy组件结构导入组件并将其放入模板中script setup import { Separator } from reka-ui /script template Separator / /templateSeparator没有子部件part体系单组件即完成全部功能这使它在 packages/core/src/Separator/index.ts 中只导出一个默认导出export { default as Separator, type SeparatorProps } from ./Separator.vue。API 参考以下属性定义与 docs/content/meta/Separator.md 中呈现的官方 Props 表一致名称类型必填默认值说明asAsTag \| Component否div组件实际渲染成的元素或组件可被asChild覆盖asChildboolean否-将默认渲染元素改为传入的子元素并合并其 props 与行为详见仓库 Composition 指南decorativeboolean否-组件是否纯装饰用途。为true时无障碍相关属性被更新使渲染元素从无障碍树中移除orientationvertical \| horizontal否horizontal组件方向默认水平属性背后的实现原理从 packages/core/src/shared/component/BaseSeparator.vue 的源码可以看到这些属性在底层的真实行为方向校验与回退内部通过ORIENTATIONS [horizontal, vertical]白名单校验orientation非法值一律回退为horizontalisValidOrientation函数与computedOrientation计算属性aria-orientation仅在垂直时输出注释明确指出“aria-orientation默认即 horizontal因此只有在 vertical 时才需要显式输出”避免冗余属性语义属性由decorative驱动decorative true时输出rolenone将元素从无障碍树移除否则输出roleseparator与必要的aria-orientation始终输出data-orientation无论哪种方向都会在根元素上绑定data-orientation数据属性作为样式化的状态钩子。顶层 packages/core/src/Separator/Separator.vue 仅是薄封装defineProps中同样以orientation: horizontal作为默认值并将所有 props 透传给BaseSeparator同时保留slot /供自定义内容。渲染的数据属性组件会在根元素上暴露如下数据属性供 CSS 选择器或 Tailwind 变体使用属性取值[data-orientation]vertical、horizontal无障碍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 stylewidth: 100%; max-width: 300px; margin: 0 15px divReka UI/div div stylefont-weight: 500An open-source UI component library./div !-- 水平分割线 -- Separator classSeparatorRoot / div styledisplay: flex; height: 20px; align-items: center divBlog/div !-- 垂直装饰分割线 -- Separator classSeparatorRoot decorative orientationvertical / divDocs/div Separator classSeparatorRoot decorative orientationvertical / divSource/div /div /div /templateCSS 方案参考 docs/components/demo/Separator/css/styles.css利用data-orientation数据属性区分横竖样式.SeparatorRoot { background-color: var(--grass-6); } .SeparatorRoot[data-orientationhorizontal] { height: 1px; width: 100%; } .SeparatorRoot[data-orientationvertical] { 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 classbg-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考