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