UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载本指南以 shadcn-vue 仓库中 Scroll Area 官方文档 为骨架深入讲解该组件的安装方式、结构组成与用法。Scroll Area 是对原生滚动行为的增强封装用于提供自定义、跨浏览器一致的滚动条样式读完本文你将掌握通过 CLI 或手动方式引入组件、理解其底层 reka-ui 实现原理并能结合实际业务场景正确使用。组件概览Scroll Area 在项目中被定位为一个 UI 基础组件registry:ui核心价值在于原生浏览器滚动条样式在不同操作系统与浏览器下差异巨大而通过 reka-ui 的ScrollAreaRoot、ScrollAreaViewport、ScrollAreaScrollbar、ScrollAreaThumb、ScrollAreaCorner等原子组件组合可以构建出一套视觉统一、且支持触控touch交互的自定义滚动区域。在 官方组件文档 中其描述为 Augments native scroll functionality for custom, cross-browser styling即增强原生滚动能力实现自定义、跨浏览器样式。安装方式一CLI 一键安装推荐在项目根目录执行npx shadcn-vuelatest add scroll-areaCLI 会自动完成依赖安装与组件文件复制。从 registry 元数据 可以看到该组件声明了两个运行时依赖reka-ui提供 Scroll Area 的底层无头组件实现root、viewport、scrollbar、thumb、cornervueuse/core提供reactiveOmit工具函数用于从 props 中剥离class后将其余属性透传给底层组件。同时它会向项目中写入三个文件registry/new-york-v4/ui/scroll-area/ScrollArea.vueregistry/new-york-v4/ui/scroll-area/ScrollBar.vueregistry/new-york-v4/ui/scroll-area/index.ts方式二手动安装如果你希望完全掌控代码可以手动引入安装依赖npm install reka-ui将 ScrollArea.vue、ScrollBar.vue 与 index.ts 复制到你的components/ui/scroll-area目录根据你的项目结构调整import路径源码中使用了/lib/utils的cn工具函数与/registry/...别名需与你的 tsconfig / vite 别名配置一致。基本用法文档给出的最小可用示例script setup langts import { ScrollArea } from /components/ui/scroll-area /script template ScrollArea classh-[200px] w-[350px] rounded-md border p-4 Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the kings pillow, in his soup, even in the royal toilet. The king was furious, but he couldnt seem to stop Jokester. And then one day, the king tripped over one of Jokesters whoopee cushions and fell into the moat. He was so embarrassed that he decided to make Jokester the official court jester. /ScrollArea /template关键点ScrollArea包裹的内容会被放入内部 viewport 中实现滚动通过class直接控制外层容器尺寸如h-[200px]与外观rounded-md border p-4默认样式下滚动条仅在需要时出现且为圆角细条风格。结合真实业务数据的长列表示例官方预览组件 ScrollAreaDemo.vue 展示了一个更贴近真实场景的用法——滚动 50 条带分隔线的标签列表script setup langts import { ScrollArea } from /registry/new-york-v4/ui/scroll-area import { Separator } from /registry/new-york-v4/ui/separator const tags Array.from({ length: 50 }).map( (_, i, a) v1.2.0-beta.${a.length - i}, ) /script template ScrollArea classh-72 w-48 rounded-md border div classp-4 h4 classmb-4 text-sm leading-none font-medium Tags /h4 template v-fortag in tags :keytag div classtext-sm {{ tag }} /div Separator classmy-2 / /template /div /ScrollArea /template这里的思路是外层固定h-72 w-48尺寸内部渲染超出高度的内容滚动条自动接管滚动非常适合标签列表、消息列表、命令面板等需要固定高度滚动的场景。源码结构解析ScrollArea.vue根容器script setup langts import type { ScrollAreaRootProps } from reka-ui import type { HTMLAttributes } from vue import { reactiveOmit } from vueuse/core import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport, } from reka-ui import { cn } from /lib/utils import ScrollBar from ./ScrollBar.vue const props definePropsScrollAreaRootProps { class?: HTMLAttributes[class] }() const delegatedProps reactiveOmit(props, class) /script template ScrollAreaRoot >script setup langts import type { ScrollAreaScrollbarProps } from reka-ui import type { HTMLAttributes } from vue import { reactiveOmit } from vueuse/core import { ScrollAreaScrollbar, ScrollAreaThumb } from reka-ui import { cn } from /lib/utils const props withDefaults(definePropsScrollAreaScrollbarProps { class?: HTMLAttributes[class] }(), { orientation: vertical, }) const delegatedProps reactiveOmit(props, class) /script template ScrollAreaScrollbar >export { default as ScrollArea } from ./ScrollArea.vue export { default as ScrollBar } from ./ScrollBar.vue该文件同时导出ScrollArea与ScrollBar因此你也可以在需要精细控制时单独引入ScrollBar并自定义其orientation。进阶用法双方向滚动当内容同时在宽高两个方向溢出时可在ScrollArea内追加一条水平ScrollBartemplate ScrollArea classh-64 w-full rounded-md border !-- 宽内容 -- div classmin-w-[800px]…/div ScrollBar orientationhorizontal / /ScrollArea /template与 scroll-fade 搭配在 scroll-fade 工具文档 中明确指出ScrollArea与MessageScroller组件可以在其可滚动 viewport 上使用scroll-fade实现内容在滚动边缘渐隐的视觉效果适合对话流、日志等长内容场景。自定义外观由于所有样式都通过class注入你可以轻松覆盖滚动条样式例如更宽的滚动条、主题色滑块template ScrollArea classh-64 rounded-md border div classp-4…/div ScrollBar classw-3 bg-muted / /ScrollArea /templateScrollBar的class会通过cn合并到已有样式之后从而覆盖默认的w-2.5等尺寸。组件注册与分发机制组件在仓库中通过 registry 体系分发。除了 new-york-v4 版本仓库还同时维护了default、new-york以及reka-luma、reka-lyra、reka-maia、reka-mira、reka-nova、reka-rhea、reka-sera、reka-vega等多套风格变体见apps/v4/public/r/styles/下同名 JSON。各风格在底层 API 与组合方式上保持一致差异主要体现在样式类与视觉基调上你可根据项目设计体系选择对应风格。同时组件已在 注册表索引 中登记CLI 的add命令正是通过这份索引完成组件解析与文件落盘。常见问题滚动区高度未生效ScrollArea需要明确的高度约束固定像素、百分比或 Tailwind 高度类否则内容会自然撑开而不会滚动滚动条不显示默认typeauto只在滚动时显示滚动条如需常驻可传typealways该 prop 会经reactiveOmit透传给ScrollAreaRoot嵌套滚动冲突多层ScrollArea嵌套时建议内部使用typeauto或按需设置scroll-snap行为避免触摸滚动事件互相抢占SSR 环境组件基于 reka-ui使用前确认项目已正确配置 SSR 兼容reka-ui 本身支持服务端渲染无需额外插件。小结Scroll Area 是 shadcn-vue 体系中小而精的典型组件对外只需一个ScrollArea对内则由 reka-ui 的五个无头原子组件协作完成视口、滚动条、滑块与角落区域的渲染并通过reactiveOmit实现 class 剥离与属性透传。无论是普通文本溢出、标签长列表还是与 scroll-fade 组合的消息流场景它都能提供跨浏览器一致的自定义滚动体验。后续可继续阅读 ScrollAreaDemo 完整示例 与 reka-ui 相关文档 中链接的 API 参考进一步掌握type、orientation等 props 的完整取值。赞分享UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载相关推荐shadcn-svelte Scroll Area 组件实战基于 bits-ui 打造跨浏览器统一的自定义滚动区域shadcn svelte Scroll Area 组件实战基于 bits ui 打造跨浏览器统一的自定义滚动区域 导读 Scroll Area 是 shadUI组件前端CLI开发工具零基础入门文本摘要用Pointer Summarizer实现CNN/DailyMail数据集训练的完整指南零基础入门文本摘要用Pointer Summarizer实现CNN/DailyMail数据集训练的完整指南 想要快速掌握文本摘要技术吗本文为您提供一份面向初React-Custom-Scroll打造跨浏览器的自定义滚动条React Custom Scroll打造跨浏览器的自定义滚动条 项目介绍 在现代Web开发中滚动条的设计往往成为用户体验的重要组成部分。然而不同浏览器对上一篇DAPLink终极指南如何轻松搞定嵌入式开发环境搭建下一篇F3D完整指南如何快速上手这款轻量级3D查看器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考