wired-tabs 手绘风格选项卡组件实战指南：基于 wired-elements 的 Tabs 使用与实现原理

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 变量以及标签页切换、键盘导航等底层实现原理并能独立在项目中落地使用。一、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其实现见 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 演示了本地构建产物的引入方式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内居中显示。运行时动态切换selected是一个可绑定的 String 属性src/wired-tabs.ts 中声明为property({ type: String }) selected?。点击标签按钮时源码通过this.selected p.name更新属性src/wired-tabs.ts因此你也可以用 JavaScript 动态切换const tabs document.querySelector(wired-tabs); tabs.selected Three; // 切换到 nameThree 的标签页四、属性说明WiredTabs 属性属性类型说明selectedstring当前选中标签页的名称即对应wired-tab的name值行为细节依据源码默认选中第一个当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的默认行为在渲染逻辑中体现${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 自定义变量用于定制选中态样式均由 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; }源码依据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选择器上。六、原理与实现细节1. 标签页的注册与映射wired-tabs内部通过slot接收子元素slotchange事件触发mapPages()src/wired-tabs.ts。该方法只收集tagName wired-tab的元素节点src/wired-tabs.ts把它们存入pages数组同时把name支持空格拆分的多段写入pageMap从而建立名称 → 页面元素的映射。2. 选中状态的切换与面板显隐updated()中根据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所以每次绘制的手绘线条都不完全一样呈现出随手涂鸦的观感标签按钮wired-item的选中背景则用hachureFill()绘制斜线阴影填充src/wired-item.ts实现见 src/wired-lib.ts。4. 尺寸自适应wired-tab构造时会创建ResizeObserver监听自身尺寸变化以重绘 SVG在不支持ResizeObserver的环境下回退为监听window.resize事件src/wired-tab.ts并在元素卸载时通过disconnectedCallback释放监听。5. 键盘导航wired-tabs在firstUpdated()中注册keydown监听src/wired-tabs.ts按左/上方向键37/38→selectPrevious()按右/下方向键39/40→selectNext()。两个方法都会阻止默认行为并在标签页之间循环切换首尾相接从而支持键盘无障碍操作。七、注意事项selected匹配的是wired-tab的name值而不是label同一时刻只显示一个面板其余面板通过hidden类隐藏而非移除 DOM切换面板后手绘边框需要重绘源码采用双层requestAnimationFrame等待布局稳定后再绘制因此内容较多或含图片时首次渲染可能有极短暂的先显示后描边过程属正常现象若name为空则该 tab 无法被selected匹配mapPages仅注册非空 name但仍可作为首个标签被默认选中。八、许可证wired-tabs 随 wired-elements 一起以 MIT License 发布作者为 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 实战指南用 wired-elements 打造手绘风格卡片容器wired card 实战指南用 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组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考