UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载Separator分隔线是界面中最常用的视觉元素之一用于在内容区块之间建立清晰的分隔关系。在 shadcn-vue 中Separator 是对 reka-ui 同名原语的封装组件通过极简的 API 同时实现视觉分隔一条可见的分隔线与语义分隔对辅助技术隐藏的装饰性占位。本文将基于仓库内 Separator 官方文档 与 new-york-v4 风格源码完整讲解其安装流程、源码实现原理、属性默认值以及水平/垂直分隔的实战用法。组件简介根据文档 frontmatter 中的描述Separator 的作用是Visually or semantically separates content.在视觉或语义上分隔内容。这意味着它有两种定位视觉分隔默认渲染为一条 1px 的实线将相邻内容块隔开语义分隔当decorative为true时组件对屏幕阅读器等辅助技术完全隐藏仅充当布局占位不产生多余的语义信息。在 shadcn-vue 的组件体系中Separator 属于基础 UI 组件被大量复用于侧边栏、对话框、下拉菜单、命令面板、表单分组等场景用于区分不同信息区域。安装文档提供了两种安装方式分别适用于 CLI 用户与需要完全掌控源码的用户。方式一CLI 安装推荐在项目根目录执行npx shadcn-vuelatest add separatorCLI 会自动完成以下工作解析当前项目的组件风格与颜色配置、安装依赖、将组件源码写入components/ui/separator目录并更新全局导出。方式二手动安装手动安装共三步第一步安装核心依赖npm install reka-ui从 registry 元数据 separator.json 可以看到该组件实际声明了两个依赖reka-ui提供底层的Separator原语与vueuse/core提供reactiveOmit等响应式工具函数。因此严格来说手动安装时应同时安装npm install reka-ui vueuse/core第二步将 Separator.vue 与 index.ts 复制到项目src/components/ui/separator/目录下。第三步更新源码中的导入路径使其指向你自己的lib/utils提供cn工具函数与别名配置默认/指向src。源码解析一个 29 行的精致封装Separator.vue的完整源码非常精简其核心逻辑可以用一张调用链概括shadcn-vue 封装 → reka-ui 原语 → 原生 DOM 元素。下面逐段分析。script setup langts import type { SeparatorProps } from reka-ui import type { HTMLAttributes } from vue import { reactiveOmit } from vueuse/core import { Separator } from reka-ui import { cn } from /lib/utils const props withDefaults(defineProps SeparatorProps { class?: HTMLAttributes[class] } (), { orientation: horizontal, decorative: true, }) const delegatedProps reactiveOmit(props, class) /script template Separator >export { default as Separator } from ./Separator.vue此外仓库在 bases 目录 中维护了一份更基础的版本其垂直分隔样式使用self-stretch拉伸撑满父容器替代 new-york-v4 风格的h-full可作为理解两种风格差异的参考。用法水平分隔与垂直分隔文档中的 Usage 示例同时演示了 Separator 的两种典型形态也是 SeparatorDemo.vue 的实际渲染内容script setup langts import { Separator } from /components/ui/separator /script template div div classspace-y-1 h4 classtext-sm font-medium leading-none Radix Primitives /h4 p classtext-sm text-muted-foreground An open-source UI component library. /p /div Separator classmy-4 / div classflex h-5 items-center space-x-4 text-sm divBlog/div Separator orientationvertical / divDocs/div Separator orientationvertical / divSource/div /div /div /template水平分隔标题与正文之间的留白分隔第一种场景中Separator classmy-4 /被放置在标题区与导航区之间未传orientation使用默认的horizontalclassmy-4通过样式合并通道追加垂直外边距在分隔线上、下各留出1rem间距分隔线本身高度仅 1px、宽度占满容器形成一条标准的水平细线。垂直分隔flex 布局中的导航项分隔第二种场景展示了垂直分隔的经典用法在flex h-5 items-center space-x-4的行内布局中用Separator orientationvertical /将 Blog / Docs / Source 三个导航项逐一隔开容器固定高度h-5垂直分隔线通过h-full撑满容器高度宽度仅 1px与相邻内容靠space-x-4保持间距多个Separator可自由组合形成清晰、等距的分隔节奏。常见组合场景对话框 / 抽屉Dialog / Sheet在表单区域与操作按钮区之间放置水平 Separator强化主次层级下拉菜单 / 命令面板菜单中常用带间距的分隔线划分分组如 ComboboxWithGroupsAndSeparator.vue 所示侧边导航在导航区块之间插入垂直或水平分隔线提高可扫读性。多风格主题支持该组件随仓库的 8 套 reka 风格reka-luma / reka-lyra / reka-maia / reka-mira / reka-nova / reka-rhea / reka-sera / reka-vega以及 default、new-york、new-york-v4 三套经典风格分别发布了独立的 registry 条目见 public/r/styles 目录。各风格的实现思路一致仅在类名细节如垂直方向使用self-stretch还是h-full上略有差异。使用 CLI 安装时会根据项目的风格配置自动选择对应版本无需手动干预。总结shadcn-vue 的 Separator 是一个小而精的封装范本29 行源码完成类型安全、属性透传、方向响应式样式与语义化控制。安装只需一条命令使用只需一个标签却能同时胜任视觉分隔与语义分隔两种职责。理解其reactiveOmitdata-orientation的架构模式后你可以轻松地为其他 reka-ui 原语编写类似的高质量封装。赞分享UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载相关推荐shadcn-svelte Separator 组件完全指南从安装到源码级解析shadcn svelte Separator 组件完全指南从安装到源码级解析 导读 Separator 分隔线是 shadcn svelte 中最轻量却UI组件前端CLI开发工具React Native Elements Divider 组件完整实战指南水平/垂直分隔线、Inset 与 SubHeader 深度解析React Native Elements Divider 组件完整实战指南水平/垂直分隔线、Inset 与 SubHeader 深度解析 导读 本文以 ReUI组件移动开发前端shadcn-vue Skeleton 组件完全指南安装、源码解析与加载占位实战shadcn vue Skeleton 组件完全指南安装、源码解析与加载占位实战 导读 本文围绕 shadcn vue 仓库中的 Skeleton骨架屏组UI组件前端上一篇终极PDF元数据操作指南如何使用pypdf库快速读取与修改PDF文档信息下一篇Ory Kratos 如何支撑上亿级用户高可扩展身份认证架构的深度剖析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考