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-combo是 wired-elements 组件库中模拟原生浏览器select的下拉组合选择器Combobox其外观采用手绘线框wireframe风格非常适合原型设计、线框图或追求趣味视觉的页面。本文基于仓库中 docs/wired-combo.md 文档并结合 wired-combo 源码 深入讲解其安装方式、属性、事件、CSS 自定义变量与底层交互实现帮助你在项目中快速落地这一组件并理解其内部工作原理。一、组件概述wired-combo是一个手绘风格的下拉选择控件功能上等价于原生select元素点击后弹出一个包含wired-item选项的列表用户选择后选中项文本显示在触发面板上。从源码注释与类定义看src/wired-combo.ts#L19-L23组件基于 Lit 实现内部使用 RoughJS 生成手绘 SVG 描边并通过wired-card承载弹出的选项列表。二、安装与引入1. 通过 npm 安装将 wired-elements 添加到你的 JavaScript 项目中npm i wired-elements该包在仓库 package.json 中声明的版本为3.0.0-rc.7依赖lit与roughjs类型声明与模块入口均指向编译后的lib/目录。2. 在代码中导入模块import { WiredCombo } from wired-elements; // 或者按需单独导入 import { WiredCombo } from wired-elements/lib/wired-combo.js;所有组件也统一从 src/wired-elements.ts 汇总导出因此一次import { WiredCombo } from wired-elements即可。3. 直接通过 CDN 在 HTML 页面中使用script typemodule srchttps://unpkg.com/wired-elements/lib/wired-combo.js?module/script导入后浏览器会注册wired-combo自定义元素可直接在 HTML 中书写。三、基础用法在 HTML 中使用wired-combo时需要配合wired-item声明选项列表wired-combo idcombo selectedtwo wired-item valueoneNumber One/wired-item wired-item valuetwoNumber Two/wired-item wired-item valuethreeNumber Three/wired-item /wired-combo这里selectedtwo指定初始选中项其值需与某个wired-item的value属性匹配。仓库提供了完整的可运行示例 examples/combo.html其中展示了三个不同状态的组合框带默认选中、禁用态、无选中态以及通过按钮读取所有组合框selected值的脚本script document.querySelector(button).addEventListener(click, () { const combos document.querySelectorAll(wired-combo); combos.forEach((c) { console.log(c, c.selected); }); }); /scriptwired-item 选项元素wired-item是 wired-combo 的选项载体其自身文档见 docs/wired-item.md源码位于 src/wired-item.ts。它暴露以下属性属性类型说明valuestring选项的值用于与wired-combo的selected匹配namestring选项名称selectedboolean当前是否处于选中状态由组合框内部驱动wired-item内部渲染为一个按钮选中时通过hachureFill来自 src/wired-lib.ts在手绘边框内填充斜线纹理形成被圈选的视觉效果背景色可由 CSS 变量控制见下文。四、属性Propertieswired-combo暴露两个核心属性src/wired-combo.ts#L21-L23属性类型默认值说明disabledbooleanfalse禁用该组合框禁止展开与选择selectedstring无当前选中项的value值selected是响应式属性且带有reflect: true即设置后会在 DOM 属性上同步。源码中组件还维护了一个内部只读对象value类型为{ value, text }用于缓存当前选中项的值 显示文本渲染时将其文本显示在触发面板上src/wired-combo.ts#L113-L128。disabled 的实际行为从源码 refreshDisabledState 可以看到当disabled为true时组件增加wired-disabledclass样式上变为半透明opacity: 0.5、cursor: default且pointer-events: nonesrc/wired-combo.ts#L43-L48组件的tabIndex被置为-1使其无法通过 Tab 聚焦下拉箭头多边形被设置为pointer-events: none阻止点击src/wired-combo.ts#L198-L205。示例写法wired-combo selectedone disabled wired-item valueoneDisabled/wired-item wired-item valuetwoNumber Two/wired-item /wired-combo五、自定义 CSS 变量wired-combo支持通过 CSS 变量定制外观文档声明的两个变量如下CSS 变量作用--wired-combo-popup-bg组合框展开时下拉面板的背景色默认值为white--wired-item-selected-bg选中项的背景描边颜色第一个变量在 src/wired-combo.ts#L101 中用于弹出卡片#card的背景#card { background: var(--wired-combo-popup-bg, white); }第二个变量在 src/wired-item.ts#L70 中控制选中项手绘描边的颜色svg path { stroke: var(--wired-item-selected-bg, #000); }结合示例 examples/combo.html 的写法可在样式表中覆盖wired-combo { --wired-combo-popup-bg: #fafafa; --wired-item-selected-bg: darkblue; }六、事件Eventsselected当用户选中某个选项时触发。源码中通过fireEvent派发一个bubbles: true, composed: true的自定义事件src/wired-combo.ts#L292-L294、src/wired-base.ts#L73-L78事件对象携带detail.selected值为当前选中项的value。监听示例document.querySelector(#combo).addEventListener(selected, (e) { console.log(selected:, e.detail.selected); });注意selected事件不仅在点击选项时触发当用户通过键盘上下键切换选项时同样会触发见下节。七、键盘交互与无障碍ARIA实现从源码 firstUpdated 可以看出wired-combo内置了完整的键盘支持使其行为接近原生 select按键行为↑/←37/38选中上一个选项selectPrevious↓/→39/40选中下一个选项selectNextEnter13切换下拉面板的展开/收起Space32展开下拉面板Esc27收起下拉面板其中selectPrevious与selectNext都是循环遍历wired-item列表的从当前选中项出发向前/向后移动到达边界时回绕src/wired-combo.ts#L296-L340。每次切换都会更新selected、刷新选中状态并触发selected事件。无障碍方面组件在挂载后自动设置宿主元素rolecombobox、aria-haspopuplistbox弹出面板wired-cardrolelistbox每个wired-item设置roleoption选中项设置aria-selectedtrue面板展开状态通过aria-expanded实时同步。展开面板内的选项在打开时会请求一次重新布局requestUpdate见 src/wired-combo.ts#L260-L280确保手绘图形尺寸正确。八、底层绘制原理wired-combo的手绘外观由 RoughJS 生成组件在updated钩子中清除旧的 SVG 内容然后根据文本面板的实际尺寸用 src/wired-lib.ts 提供的rectangle分别绘制文本区边框与右侧 34px 的下拉箭头区再用polygon绘制箭头三角src/wired-combo.ts#L181-L206。每次渲染使用随机的seedrandomSeed()来自 src/wired-base.ts因此每次刷新后的笔迹略有不同这正是手绘风格的自然来源。九、Licensewired-combo遵循 MIT 许可完整许可文本见仓库根目录的 LICENSE。总结wired-combo用约三百行源码src/wired-combo.ts实现了功能完整、无障碍友好且交互细节丰富的手绘下拉选择器。它支持disabled/selected两个公开属性、selected事件与两个 CSS 自定义变量配合wired-item使用即可快速构建线框风格的表单。实际动手时可直接参考 examples/combo.html 体验三种状态下的表现再按需接入自己的事件处理与样式定制。赞分享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项目中的手绘风格组合框组件wired-combo详解Wired Elements项目中的手绘风格组合框组件wired combo详解 引言手绘UI的魅力与实用价值 在现代Web开发中用户界面的视觉表现越来越多UI组件前端wired-elements 之 wired-radio-group手绘风格单选组组件完整使用与源码解析wired elements 之 wired radio group手绘风格单选组组件完整使用与源码解析 导读 wired radio group 是 wirUI组件前端wired-card 实战指南用 wired-elements 打造手绘风格卡片容器wired card 实战指南用 wired elements 打造手绘风格卡片容器 wired card 是 wired elements 组件库中的容器型UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考