UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载导读Toggle 是 shadcn-vue 中一个经典的双态按钮two-state button点击后在开 / 关两种视觉状态间切换常用于富文本工具栏的加粗、斜体、下划线等操作。本文以仓库内 toggle.md 文档为骨架结合其底层实现源码Toggle.vue、index.ts与全部官方示例完整讲解安装方式、基础用法、变体variant、尺寸size体系及每个官方示例的实现细节帮助你快速在 Vue 3 TypeScript 项目中落地这一组件。组件定位与底层原理Toggle 是对 Reka UIshadcn-vue 底层的无头组件库中 Toggle 原语 的封装。Reka UI 负责状态管理、键盘交互与无障碍ARIA语义shadcn-vue 则在其上叠加了基于 Tailwind CSS 与class-variance-authoritycva的样式系统。从源码结构看该组件的封装层非常薄核心逻辑全部委托给无头原语deprecated/www/src/registry/default/ui/toggle/Toggle.vue组件主体default 风格deprecated/www/src/registry/default/ui/toggle/index.ts导出组件并定义toggleVariants样式变体deprecated/www/src/registry/new-york/ui/toggle/Toggle.vueNew York 风格变体实现与 default 版完全一致仅注册路径不同。安装方式一CLI 安装推荐在项目根目录执行npx shadcn-vuelatest add toggle该命令会自动完成依赖安装、组件文件复制与components.json配置更新同时把toggleVariants类型一并注册到项目的ui/toggle目录。方式二手动安装手动安装只需两步安装运行时依赖npm install reka-ui将 Toggle.vue 复制到项目的src/components/ui/toggle/Toggle.vue目录按你的components.json中aliases配置而定同时将 index.ts 复制为同目录下的index.ts。需要注意的是index.ts 还依赖项目已有的工具函数cn/lib/utils以及class-variance-authority、vueuse/core、reka-ui三个第三方包手动安装时需确保这些依赖已就绪。基础用法组件默认导出用法非常简洁script setup langts import { Toggle } from /components/ui/toggle /script template ToggleToggle/Toggle /template建议配合无障碍属性与图标使用参见官方 ToggleDemo.vuescript setup langts import { Bold } from lucide-vue-next import { Toggle } from /components/ui/toggle /script template Toggle aria-labelToggle bold Bold classh-4 w-4 / /Toggle /template组件在脚本部分做了三层处理理解它们有助于你安全地扩展 props类型合并definePropsToggleProps { class?, variant?, size? }()在 Reka UI 原语 props 之上追加了样式相关的class、variant、size默认值variant: default、size: default、disabled: false属性转发用reactiveOmit(props, class, size, variant)剔除样式类属性再通过useForwardPropsEmits将剩余的原语属性与事件转发给底层的 Reka UIToggle保证pressed、disabled等状态与update:pressed事件正常工作。模板部分通过作用域插槽v-slotslotProps暴露原语的 slot props方便你访问内部状态例如根据 pressed 状态动态渲染内容。变体与尺寸toggleVariants 全参数解析组件的外观完全由 index.ts 中的toggleVariantscva 工厂函数驱动基础样式始终生效inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50>script setup langts import { Italic } from lucide-vue-next import { Toggle } from /components/ui/toggle /script template Toggle variantoutline aria-labelToggle italic Italic classw-4 h-4 / /Toggle /template与默认变体的区别在于增加了border border-input描边悬停与开态都会切换为bg-accent强调背景。带文字With Text在图标旁附加文字标签同时演示了variantoutline与插槽内容的组合用法参见同目录下ToggleItalicWithTextDemo.vuetemplate Toggle variantoutline aria-labelToggle italic Italic classw-4 h-4 / Italic /Toggle /template由于基础样式自带gap-2图标与文字之间会自动保留 0.5rem 间距。小尺寸Small对应 ToggleSmallDemo.vuetemplate Toggle sizesm aria-labelToggle italic Italic classw-4 h-4 / /Toggle /template使用sizesmh-9 px-2.5 min-w-9适合紧凑的工具栏场景。大尺寸Large对应 ToggleLargeDemo.vuetemplate Toggle sizelg aria-labelToggle italic Italic classw-4 h-4 / /Toggle /template使用sizelgh-11 px-5 min-w-11适合作为主要操作入口或触屏场景。禁用态Disabled对应 ToggleDisabledDemo.vuescript setup langts import { Underline } from lucide-vue-next import { Toggle } from /components/ui/toggle /script template Toggle aria-labelToggle underline disabled Underline classw-4 h-4 / /Toggle /templatedisabled属性直接透传给 Reka UI 原语样式层以 50% 透明度和pointer-events-none呈现同时原语会阻止点击与键盘触发。扩展Toggle Group 与 v4 目录除了单按钮仓库还在 deprecated/www/src/registry/default/examples/ 下提供了ToggleGroupDemo.vue、ToggleGroupSingleDemo.vue、ToggleGroupDisabledDemo.vue等一组示例展示了将多个 Toggle 组合成互斥/多选工具组的用法对应 Reka UI 的 ToggleGroup 原语可作为进阶参考。此外当前仓库活跃应用目录 apps/v4/components/demo/ 下同样维护着ToggleDemo.vue、ToggleOutlineDemo.vue、ToggleSmallDemo.vue、ToggleLargeDemo.vue、ToggleDisabledDemo.vue、ToggleTextDemo.vue等与本文主题一致的示例说明 Toggle 组件在 v4 文档站中仍是标准组件之一接口与本文描述保持一致。小结Toggle 组件体现了 shadcn-vue 的一贯设计哲学用 Reka UI 无头原语保证交互与无障碍用 cva 变体体系提供极简的样式 API。掌握variant、size两个核心参数与data-[stateon]状态钩子你就能在任意 Vue 3 Tailwind CSS 项目中快速定制出符合设计系统的双态按钮。赞分享UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载相关推荐shadcn-svelte Slider 组件完全指南安装、配置与源码解析shadcn svelte Slider 组件完全指南安装、配置与源码解析 本指南以 shadcn svelte 官方文档中的 Slider 组件文档为核心UI组件前端CLI开发工具shadcn-vue Table 组件完全指南安装、组合式 API 与源码级解析shadcn vue Table 组件完全指南安装、组合式 API 与源码级解析 Table 是 shadcn vue 中一个响应式responsive数UI组件前端shadcn-vue Aspect Ratio 组件完全指南安装、用法与源码原理shadcn vue Aspect Ratio 组件完全指南安装、用法与源码原理 导读 Aspect Ratio宽高比是 shadcn vue 组件库中一UI组件前端上一篇深入解析 Tasmota 内置的 Berry 脚本语言嵌入式超轻量动态语言的架构、语法与实战下一篇Backstage v1.32.0-next.1 版本解析Jest 配置破坏性变更、Bitbucket Server OAuth 支持与 Scaffolder 体验升级创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考