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-listbox 是 wired-elements 系列中用于单选列表选择的手绘风 Web Component选中的wired-item会被高亮支持垂直默认与水平两种布局并能通过键盘方向键快速切换选项。本文以 docs/wired-listbox.md 为主线结合仓库源码与示例完整讲解它的安装方式、HTML 用法、属性、自定义 CSS 变量、事件机制以及底层实现原理帮助你直接把它应用到线框图wireframe、原型或任何需要手绘感界面的项目中。什么是 wired-listboxwired-listbox 是一个外观呈现手绘风格的列表选择控件。它本身不直接渲染选项而是通过slot接收一组 wired-item 作为列表项选中项的文本颜色与背景会被高亮同时组件外围会用 RoughJS 画出一圈手绘感的矩形边框。它可以垂直排列默认也可以设置horizontal变为水平排列适用于工具栏、菜单、选项分组等场景。完整演示与 wired-elements 全部组件的展示可访问官方演示站wiredjs.com。本组件的完整参考文档位于 docs/wired-listbox.md配套可运行示例见 examples/listbox.html。安装与引入在 JavaScript 项目中添加 wired-elementsnpm i wired-elements然后在模块代码中引入import { WiredListbox } from wired-elements; // 或按需引入单个组件 import { WiredListbox } from wired-elements/lib/wired-listbox.js;也可以直接在 HTML 页面中通过 CDN 加载 ES Module无需打包工具script typemodule srchttps://unpkg.com/wired-elements/lib/wired-listbox.js?module/script注意由于 wired-listbox 依赖同系列组件wired-item选项项若只通过上面的方式按需加载需要一并引入 wired-item 模块。参见 examples/listbox.html它同时加载了wired-item.js与wired-listbox.js完整包入口 src/wired-elements.ts 中两者也都已统一导出。基本用法在 HTML 中使用wired-listbox内部放置若干个带value的wired-itemwired-listbox idcombo selectedtwo wired-item valueoneNumber One/wired-item wired-item valuetwoNumber Two/wired-item wired-item valuethreeNumber Three/wired-item /wired-listbox水平排列并自定义选中项颜色wired-listbox horizontal selectedtwo style--wired-item-selected-color: darkred; --wired-item-selected-bg: pink; wired-item valueoneNumber One/wired-item wired-item valuetwoNumber Two/wired-item wired-item valuethreeNumber Three/wired-item /wired-listbox第一个示例渲染为垂直列表selectedtwo表示初始选中的是valuetwo那一项第二个示例加了horizontal属性三个选项横向排布并通过内联样式覆盖选中项的文字颜色为 darkred、背景为 pink。在 examples/listbox.html 中还可以看到另一种定制方式直接给wired-listbox或自定义 class 设置 CSS 变量例如将选中背景统一设为darkblue或通过.customListBox类为水平列表单独定制pink背景与darkred文字。属性Properties属性类型说明horizontalBoolean是否将选项水平排列默认为false垂直排列。selectedString当前选中项的 value 值。valueObject选中项的{ value, text }对象由组件内部维护反映当前选中项的值与文本。horizontal源码中以property({ type: Boolean }) horizontal false声明见 src/wired-listbox.ts。它在updated()中通过给宿主元素添加/移除wired-horizontalclass 生效默认::slotted(wired-item)为display: block纵向堆叠加上wired-horizontal后变为display: inline-block横向排布见 src/wired-listbox.ts。selected声明为字符串属性src/wired-listbox.ts。它既可以作为 HTML 属性在初始化时指定默认选中项也可以在用户点击或键盘操作时被组件自动更新。value对象类型{ value: string; text: string }。每次刷新选中状态时组件会把当前选中项的value和textContent组装成对象存入该属性没有匹配项时则为undefined见 src/wired-listbox.ts。这便于在框架中直接读取选中项的结构化数据。与wired-combo不同combo 是下拉弹层交互而 listbox 始终把全部选项暴露在页面上可垂直或水平排列两者的键盘导航与选中逻辑则基本一致。自定义 CSS 变量变量作用--wired-item-selected-bg选中项的手绘高亮背景颜色。--wired-item-selected-color选中项的文字颜色。这两个变量实际作用于wired-item的样式见 src/wired-item.tsbutton.selected { color: var(--wired-item-selected-color, #fff); } svg path { stroke: var(--wired-item-selected-bg, #000); stroke-width: 2.75; fill: transparent; }也就是说未设置变量时默认值为选中文字白色#fff、高亮描边黑色#000。选中时wired-item内部会显示一个带hachureFill手绘阴影线填充的 SVG 覆盖层作为高亮背景其描边颜色由--wired-item-selected-bg控制同时文字颜色由--wired-item-selected-color控制。由于 CSS 变量天然具备继承性你可以在wired-listbox元素上、容器元素上或通过 class 声明这些变量从而批量或按实例定制多个列表项的选中样式——这正是 examples/listbox.html 中两种定制方式的原理。事件selected当用户点击某个wired-item选中它时触发事件详情为{ selected: 选中的 value 字符串 }。监听示例const listbox document.getElementById(combo); listbox.addEventListener(selected, (e) { console.log(selected value:, e.detail.selected); });实现上点击事件由onItemClick处理它把event.target的value写入selected刷新选中状态后调用fireSelected()派发事件见 src/wired-listbox.ts。事件通过CustomEvent派发设置了composed: true与bubbles: true见 src/wired-base.ts因此即使组件内部使用 Shadow DOM事件也能正常冒泡到外部便于在普通 DOM 或框架中监听。键盘导航与无障碍支持wired-listbox 内置了完整的键盘操作与 ARIA 支持这在 src/wired-listbox.ts 的firstUpdated()中初始化组件被赋予rolelistbox每个wired-item被赋予roleoption见 src/wired-listbox.ts。默认tabIndex为 0或读取已有的tabindex属性保证可以通过 Tab 聚焦。键盘事件处理←37/↑38selectPrevious()选中上一个选项当前在首项时回绕到末项。→39/↓40selectNext()选中下一个选项当前在末项时回绕到首项。聚焦时通过 CSS:host(:focus) path { stroke-width: 1.5; }让手绘边框略微加粗提供视觉焦点反馈。选中项会被设置aria-selectedtrue并移除上一项的该属性见 src/wired-listbox.ts方便读屏软件等辅助技术识别当前选中项。键盘选择同样会派发selected事件因为selectPrevious/selectNext内部在更新selected后也会调用fireSelected()。源码原理从 slot 收集到边框绘制1. 选项收集与选中刷新组件渲染结构非常简单src/wired-listbox.tsslot idslot slotchange${() this.requestUpdate()}/slot div idoverlay svg idsvg/svg /div通过slotchange触发重新渲染updated()中使用assignedNodes()收集插槽内所有WIRED-ITEM元素存入itemNodes并逐个设置roleoptionsrc/wired-listbox.ts。这一收集只会执行一次用!this.itemNodes.length判断避免重复处理。refreshSelection()遍历所有选项按element.value this.selected找到选中项切换其selected布尔属性与aria-selected并同步更新value对象src/wired-listbox.ts。2. 手绘边框的绘制wired-listbox 继承自WiredBase见 src/wired-base.ts基类负责测量尺寸、清空 SVG、调用子类draw()并在绘制完成后添加wired-renderedclass 让元素从透明过渡为可见。listbox 的draw()实现为protected draw(svg: SVGSVGElement, size: Point) { rectangle(svg, 0, 0, size[0], size[1], this.seed); }即调用 src/wired-lib.ts 中的rectangle()借助 RoughJS 的roughRectangle配合随机种子seed生成歪歪扭扭的手绘矩形路径作为整个列表的外框。每个组件实例在构造时都会生成随机seedsrc/wired-base.ts因此每次渲染的笔迹细节都略有不同这正是手绘质感sketchy look的来源之一。3. 选中高亮wired-item 的手绘阴影填充wired-itemsrc/wired-item.ts内部渲染为一个button加一个隐藏的 SVG 覆盖层当选中的布尔属性为true时button 加上selectedclass文字颜色应用--wired-item-selected-color覆盖层显示其中通过hachureFill()以手绘阴影线hachure填充整个按钮区域src/wired-item.ts描边颜色取自--wired-item-selected-bg。因此你看到的选中高亮本质是一层 RoughJS 生成的阴影线纹理而不是普通的纯色背景——这也是与一般 UI 库选中态在视觉上最大的区别。在框架中使用wired-elements 是基于 Lit 构建的标准 Web Components可以在任何框架中直接使用原生 HTML/JS见上文基本用法或直接运行 examples/listbox.html。React / Vue / Svelte把wired-listbox当作普通自定义元素即可selected事件可通过各框架的事件绑定语法如 React 的onSelected、Vue 的selected监听。构建与本地查看仓库使用 TypeScript 编译输出到lib/目录见 tsconfig.jsonoutDir为./lib构建命令为npm run build本地快速体验可在构建后直接用浏览器打开 examples/listbox.html该示例按../lib/wired-item.js与../lib/wired-listbox.js的路径引用编译产物。总结wired-listbox是 wired-elements 系列中专注单选列表的组件垂直/水平两种布局分别覆盖菜单列表与横向选项栏两类场景。核心 API 只有三个horizontal布局、selected当前选中值、value结构化选中对象配合selected事件即可完成绝大部分交互闭环。视觉定制通过--wired-item-selected-bg与--wired-item-selected-color两个 CSS 变量实现配合示例中的 class 写法可以做到按实例精确控制。从源码看选中高亮是 RoughJS 阴影线填充外框是随机种子驱动的手绘矩形键盘方向键、rolelistbox/roleoption/aria-selected则保证了与原生列表相近的可访问性。许可证MIT License作者 Preet Shihn。更多组件用法可继续查阅 docs 目录下的其他组件文档。赞分享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-listbox详解Wired Elements项目中的手绘风格列表组件wired listbox详解 组件概述 wired listbox是Wired Elements项目提供的UI组件前端wired-listbox组件应用创建手绘风格下拉列表wired listbox组件应用创建手绘风格下拉列表 在现代网页设计中传统下拉列表往往显得单调乏味难以吸引用户注意力。wired listbox组件作为UI组件前端终极wired-elements开发指南20个手绘风格组件属性与事件详解终极wired elements开发指南20个手绘风格组件属性与事件详解 wired elements是一套独特的手绘风格Web组件库通过简单的HTML标签UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考