UI組件前端【免費(fèi)下載鏈接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.項(xiàng)目地址https://gitcode.com/gh_mirrors/wi/wired-elements點(diǎn)擊查看免費(fèi)下載是 wired-elements 組件庫(kù)中一款帶手繪hand-drawn涂鴉風(fēng)格的選項(xiàng)卡TabsWeb Component常用于線(xiàn)框圖wireframe、原型草稿或追求趣味視覺(jué)的頁(yè)面中。本文以 docs/wired-tabs.md 為骨架結(jié)合倉(cāng)庫(kù)源碼 src/wired-tabs.ts、 src/wired-tab.ts 等展開(kāi)讀者將掌握其安裝方式、HTML/JavaScript 用法、屬性與自定義 CSS 變量以及標(biāo)簽頁(yè)切換、鍵盤(pán)導(dǎo)航等底層實(shí)現(xiàn)原理并能獨(dú)立在項(xiàng)目中落地使用。一、wired-tabs 是什么wired-elements 是一套看起來(lái)像手繪的基礎(chǔ) UI 組件集合倉(cāng)庫(kù)描述為 Collection of custom elements that appear hand drawn適用于線(xiàn)框圖、原型或追求手繪趣味視覺(jué)的場(chǎng)景。wired-tabs是其中的選項(xiàng)卡容器組件與其配套的wired-tab頁(yè)面組件共同工作wired-tabs外層容器負(fù)責(zé)渲染一排手繪樣式的標(biāo)簽按鈕并控制當(dāng)前展示哪個(gè)面板wired-tab每個(gè)標(biāo)簽頁(yè)面板承載具體內(nèi)容其外層帶有手繪矩形邊框。組件基于Lit構(gòu)建、使用RoughJS生成涂鴉 SVG 路徑見(jiàn) package.json 中的dependencies標(biāo)簽按鈕實(shí)際由wired-item渲染src/wired-tabs.ts 中引入并使用wired-item其實(shí)現(xiàn)見(jiàn) src/wired-item.ts。完整組件清單可從 src/wired-elements.ts 的導(dǎo)出列表查看tabs 相關(guān)組件均在其中導(dǎo)出。二、安裝與引入1. npm 安裝將 wired-elements 添加到你的 JavaScript 項(xiàng)目npm i wired-elements2. 在模塊代碼中導(dǎo)入兩種方式等價(jià)推薦按需導(dǎo)入以減小打包體積// 從主入口導(dǎo)入 import { WiredTabs, WiredTab } from wired-elements; // 或按文件導(dǎo)入跳過(guò)未使用的組件 import { WiredTabs, WiredTab } from wired-elements/lib/wired-tabs.js;注意WiredTab與WiredTabs是兩個(gè)獨(dú)立的自定義元素定義wired-tabs.js文件同時(shí)導(dǎo)出了兩者見(jiàn) src/wired-tabs.ts 與 src/wired-elements.tswired-tab內(nèi)部還會(huì)依賴(lài)wired-item.jssrc/wired-tab.ts引入時(shí)無(wú)需手動(dòng)加載 item。3. 直接通過(guò) CDN 加載不需要構(gòu)建工具時(shí)可直接在 HTML 中用 ES Module 方式加載script typemodule srchttps://unpkg.com/wired-elements/lib/wired-tabs.js?module/script倉(cāng)庫(kù)自帶的示例 examples/tabs.html 演示了本地構(gòu)建產(chǎn)物的引入方式script typemodule src../lib/wired-tab.js/script script typemodule src../lib/wired-tabs.js/script三、基本用法一個(gè)完整示例把wired-tab作為wired-tabs的子元素每個(gè) tab 通過(guò)name屬性作為唯一標(biāo)識(shí)內(nèi)容直接寫(xiě)在標(biāo)簽內(nèi)即可wired-tabs selectedTwo wired-tab nameOne h4Card 1/h4 p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. /p /wired-tab wired-tab nameTwo h4Card 2/h4 p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. /p /wired-tab wired-tab nameThree h4Card 3/h4 p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. /p /wired-tab /wired-tabsselectedTwo表示初始激活nameTwo的標(biāo)簽頁(yè)。示例文件 examples/tabs.html 中演示了selectedThree的寫(xiě)法并把wired-tabs容器限制在max-width: 600px內(nèi)居中顯示。運(yùn)行時(shí)動(dòng)態(tài)切換selected是一個(gè)可綁定的 String 屬性src/wired-tabs.ts 中聲明為property({ type: String }) selected?。點(diǎn)擊標(biāo)簽按鈕時(shí)源碼通過(guò)this.selected p.name更新屬性src/wired-tabs.ts因此你也可以用 JavaScript 動(dòng)態(tài)切換const tabs document.querySelector(wired-tabs); tabs.selected Three; // 切換到 nameThree 的標(biāo)簽頁(yè)四、屬性說(shuō)明WiredTabs 屬性屬性類(lèi)型說(shuō)明selectedstring當(dāng)前選中標(biāo)簽頁(yè)的名稱(chēng)即對(duì)應(yīng)wired-tab的name值行為細(xì)節(jié)依據(jù)源碼默認(rèn)選中第一個(gè)當(dāng)selected未設(shè)置時(shí)mapPages()會(huì)把第一個(gè)wired-tab的name賦給selectedsrc/wired-tabs.ts容錯(cuò)回退如果selected對(duì)應(yīng)的 name 找不到getElement()會(huì)回退到第一個(gè)標(biāo)簽頁(yè)src/wired-tabs.ts支持空格分隔多名稱(chēng)pageMap會(huì)把name按空格拆分成多個(gè)段分別注冊(cè)即一個(gè) tab 可對(duì)應(yīng)多個(gè)可匹配名稱(chēng)src/wired-tabs.ts。WiredTab 屬性屬性類(lèi)型說(shuō)明namestring該標(biāo)簽頁(yè)的唯一標(biāo)識(shí)用于選中匹配labelstring標(biāo)簽按鈕上顯示的文本默認(rèn)回退為name的值label的默認(rèn)行為在渲染邏輯中體現(xiàn)${p.label || p.name}src/wired-tabs.ts即未顯式設(shè)置label時(shí)按鈕文字等于name。wired-tabs wired-tab namesettings label設(shè)置…/wired-tab wired-tab nameabout label關(guān)于…/wired-tab /wired-tabs五、自定義 CSS 變量組件暴露兩個(gè) CSS 自定義變量用于定制選中態(tài)樣式均由 src/wired-item.ts 中的按鈕樣式消費(fèi)變量作用默認(rèn)值--wired-item-selected-bg選中標(biāo)簽的涂鴉邊框顏色#000--wired-item-selected-color選中標(biāo)簽的文字顏色#fff使用示例wired-tabs { --wired-item-selected-bg: #4caf50; --wired-item-selected-color: #fff; }源碼依據(jù)button.selected { color: var(--wired-item-selected-color, #fff); }以及svg path { stroke: var(--wired-item-selected-bg, #000); … }src/wired-item.ts。這兩個(gè)變量作用于wired-item即標(biāo)簽按鈕因此既可寫(xiě)在wired-tabs上繼承給子元素也可直接寫(xiě)在wired-item選擇器上。六、原理與實(shí)現(xiàn)細(xì)節(jié)1. 標(biāo)簽頁(yè)的注冊(cè)與映射wired-tabs內(nèi)部通過(guò)slot接收子元素slotchange事件觸發(fā)mapPages()src/wired-tabs.ts。該方法只收集tagName wired-tab的元素節(jié)點(diǎn)src/wired-tabs.ts把它們存入pages數(shù)組同時(shí)把name支持空格拆分的多段寫(xiě)入pageMap從而建立名稱(chēng) → 頁(yè)面元素的映射。2. 選中狀態(tài)的切換與面板顯隱updated()中根據(jù)getElement()的結(jié)果為每個(gè)wired-tab添加或移除hidden類(lèi)src/wired-tabs.ts。隱藏邏輯由 CSS 完成::slotted(.hidden) { display: none !important; }src/wired-tabs.ts。切換后還會(huì)通過(guò)雙層requestAnimationFrame調(diào)用當(dāng)前面板的wiredRender()確保手繪邊框在內(nèi)容尺寸變化后重繪。3. 手繪邊框的繪制wired-tab繼承自WiredBasesrc/wired-base.ts其draw()調(diào)用rectangle()在 overlay 的 SVG 中畫(huà)出手繪矩形邊框src/wired-tab.tsrectangle()基于 RoughJS 的roughRectangle生成抖動(dòng)路徑src/wired-lib.ts每個(gè)實(shí)例在構(gòu)造時(shí)生成隨機(jī)seedsrc/wired-base.ts所以每次繪制的手繪線(xiàn)條都不完全一樣呈現(xiàn)出隨手涂鴉的觀(guān)感標(biāo)簽按鈕wired-item的選中背景則用hachureFill()繪制斜線(xiàn)陰影填充src/wired-item.ts實(shí)現(xiàn)見(jiàn) src/wired-lib.ts。4. 尺寸自適應(yīng)wired-tab構(gòu)造時(shí)會(huì)創(chuàng)建ResizeObserver監(jiān)聽(tīng)自身尺寸變化以重繪 SVG在不支持ResizeObserver的環(huán)境下回退為監(jiān)聽(tīng)window.resize事件src/wired-tab.ts并在元素卸載時(shí)通過(guò)disconnectedCallback釋放監(jiān)聽(tīng)。5. 鍵盤(pán)導(dǎo)航wired-tabs在firstUpdated()中注冊(cè)keydown監(jiān)聽(tīng)src/wired-tabs.ts按左/上方向鍵37/38→selectPrevious()按右/下方向鍵39/40→selectNext()。兩個(gè)方法都會(huì)阻止默認(rèn)行為并在標(biāo)簽頁(yè)之間循環(huán)切換首尾相接從而支持鍵盤(pán)無(wú)障礙操作。七、注意事項(xiàng)selected匹配的是wired-tab的name值而不是label同一時(shí)刻只顯示一個(gè)面板其余面板通過(guò)hidden類(lèi)隱藏而非移除 DOM切換面板后手繪邊框需要重繪源碼采用雙層requestAnimationFrame等待布局穩(wěn)定后再繪制因此內(nèi)容較多或含圖片時(shí)首次渲染可能有極短暫的先顯示后描邊過(guò)程屬正?，F(xiàn)象若name為空則該 tab 無(wú)法被selected匹配mapPages僅注冊(cè)非空 name但仍可作為首個(gè)標(biāo)簽被默認(rèn)選中。八、許可證wired-tabs 隨 wired-elements 一起以 MIT License 發(fā)布作者為 Preet Shihn。倉(cāng)庫(kù)根目錄的 LICENSE 文件為完整許可文本。贊分享UI組件前端【免費(fèi)下載鏈接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.項(xiàng)目地址https://gitcode.com/gh_mirrors/wi/wired-elements點(diǎn)擊查看免費(fèi)下載相關(guān)推薦wired-card 實(shí)戰(zhàn)指南用 wired-elements 打造手繪風(fēng)格卡片容器wired card 實(shí)戰(zhàn)指南用 wired elements 打造手繪風(fēng)格卡片容器 wired card 是 wired elements 組件庫(kù)中的容器型UI組件前端wired-elements 之 wired-radio-group手繪風(fēng)格單選組組件完整使用與源碼解析wired elements 之 wired radio group手繪風(fēng)格單選組組件完整使用與源碼解析 導(dǎo)讀 wired radio group 是 wirUI組件前端Wired-Elements項(xiàng)目中的手繪風(fēng)格列表組件wired-listbox詳解Wired Elements項(xiàng)目中的手繪風(fēng)格列表組件wired listbox詳解 組件概述 wired listbox是Wired Elements項(xiàng)目提供的UI組件前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考