UI組件前端【免費下載鏈接】shadcn-vueVue port of shadcn-ui項目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue點擊查看免費下載導讀Toggle 是 shadcn-vue 中一個經(jīng)典的雙態(tài)按鈕two-state button點擊后在開 / 關兩種視覺狀態(tài)間切換常用于富文本工具欄的加粗、斜體、下劃線等操作。本文以倉庫內 toggle.md 文檔為骨架結合其底層實現(xiàn)源碼Toggle.vue、index.ts與全部官方示例完整講解安裝方式、基礎用法、變體variant、尺寸size體系及每個官方示例的實現(xiàn)細節(jié)幫助你快速在 Vue 3 TypeScript 項目中落地這一組件。組件定位與底層原理Toggle 是對 Reka UIshadcn-vue 底層的無頭組件庫中 Toggle 原語 的封裝。Reka UI 負責狀態(tài)管理、鍵盤交互與無障礙ARIA語義shadcn-vue 則在其上疊加了基于 Tailwind CSS 與class-variance-authoritycva的樣式系統(tǒng)。從源碼結構看該組件的封裝層非常薄核心邏輯全部委托給無頭原語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 風格變體實現(xiàn)與 default 版完全一致僅注冊路徑不同。安裝方式一CLI 安裝推薦在項目根目錄執(zhí)行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 還依賴項目已有的工具函數(shù)cn/lib/utils以及class-variance-authority、vueuse/core、reka-ui三個第三方包手動安裝時需確保這些依賴已就緒?；A用法組件默認導出用法非常簡潔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屬性轉發(fā)用reactiveOmit(props, class, size, variant)剔除樣式類屬性再通過useForwardPropsEmits將剩余的原語屬性與事件轉發(fā)給底層的 Reka UIToggle保證pressed、disabled等狀態(tài)與update:pressed事件正常工作。模板部分通過作用域插槽v-slotslotProps暴露原語的 slot props方便你訪問內部狀態(tài)例如根據(jù) pressed 狀態(tài)動態(tài)渲染內容。變體與尺寸toggleVariants 全參數(shù)解析組件的外觀完全由 index.ts 中的toggleVariantscva 工廠函數(shù)驅動基礎樣式始終生效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與默認變體的區(qū)別在于增加了border border-input描邊懸停與開態(tài)都會切換為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適合作為主要操作入口或觸屏場景。禁用態(tài)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呈現(xiàn)同時原語會阻止點擊與鍵盤觸發(fā)。擴展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 組件體現(xiàn)了 shadcn-vue 的一貫設計哲學用 Reka UI 無頭原語保證交互與無障礙用 cva 變體體系提供極簡的樣式 API。掌握variant、size兩個核心參數(shù)與data-[stateon]狀態(tài)鉤子你就能在任意 Vue 3 Tailwind CSS 項目中快速定制出符合設計系統(tǒng)的雙態(tài)按鈕。贊分享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開發(fā)工具shadcn-vue Table 組件完全指南安裝、組合式 API 與源碼級解析shadcn vue Table 組件完全指南安裝、組合式 API 與源碼級解析 Table 是 shadcn vue 中一個響應式responsive數(shù)UI組件前端shadcn-vue Aspect Ratio 組件完全指南安裝、用法與源碼原理shadcn vue Aspect Ratio 組件完全指南安裝、用法與源碼原理 導讀 Aspect Ratio寬高比是 shadcn vue 組件庫中一UI組件前端上一篇深入解析 Tasmota 內置的 Berry 腳本語言嵌入式超輕量動態(tài)語言的架構、語法與實戰(zhàn)下一篇Backstage v1.32.0-next.1 版本解析Jest 配置破壞性變更、Bitbucket Server OAuth 支持與 Scaffolder 體驗升級創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考