wired-icon-button 手绘图标按钮组件：安装、配置与源码实现解析

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-icon-button是 wired-elements 组件库中一个以手绘素描风格呈现的圆形图标按钮它由 RoughJS 生成手绘椭圆边框中心通过 slot 承载任意图标内容例如 Material Icons 的mwc-icon非常适合用于线框图wireframe、原型草图或追求手绘趣味风格的界面。本文以 docs/wired-icon-button.md 为骨架完整覆盖其安装、导入、属性、CSS 变量与事件用法并结合 src/wired-icon-button.ts 及 examples/icon-button.html 等仓库源码深入讲解它的渲染原理、样式系统与可扩展用法读完即可直接上手使用与二次定制。组件是什么根据 docs/wired-icon-button.md 的定义wired-icon-button是一个手绘素描风格的圆形按钮中心放置一张图片。这里的图片并非限制为img也可以是由图标字体或图标 Web Component 渲染的图标比如material/mwc-iconMaterial Web Components 的图标组件。在 src/wired-icon-button.ts 中它通过customElement(wired-icon-button)注册为原生自定义元素继承自 src/wired-base.ts 中封装的WiredBase抽象基类依赖 roughjs 与 lit 两个核心库见 package.json。安装与引入通过 npm 安装在项目根目录执行npm i wired-elements安装后wired-icon-button会随wired-elements包一起提供该包同时导出WiredButton、WiredInput等全套手绘组件src/wired-elements.ts 中可见export * from ./wired-icon-button等统一导出。模块方式导入在你的 JavaScript / TypeScript 代码中import { WiredIconButton } from wired-elements; // 或按需单独引入体积更小 import { WiredIconButton } from wired-elements/lib/wired-icon-button.js;直接通过 CDN 加载无需构建工具直接在 HTML 页面中加载 ES Modulescript typemodule srchttps://unpkg.com/wired-elements/lib/wired-icon-button.js?module/script注以上路径以当前仓库wired-elements包版本3.0.0-rc.7见 package.json为准发布到 npm 后即可通过上述方式引用。基础用法引入组件后直接在 HTML 中使用自定义标签即可wired-icon-button mwc-iconfavorite/mwc-icon /wired-icon-button wired-icon-button classred mwc-iconfavorite/mwc-icon /wired-icon-button其中mwc-icon是 Material Design 的图标组件需要额外引入material/mwc-icon。你也可以放入任意 HTML 内容——凡是能通过 slot 分发的内容都会被渲染在圆形手绘按钮的中央。仓库的 examples/icon-button.html 给出了一个可直接运行的完整示例它通过 Google Fonts 加载 Material Icons 字体再引入material/mwc-icon与本组件页面中依次展示了默认样式、红色文字.red、粉色背景.pinkbg、大图标.big以及禁用态disabled五种形态。属性Propertiesdisabled— 是否禁用按钮。默认值为false。wired-icon-button disabled mwc-iconfavorite/mwc-icon /wired-icon-button在 src/wired-icon-button.ts 第 8 行它被声明为响应式布尔属性并反射到 DOMproperty({ type: Boolean, reflect: true }) disabled false;reflect: true意味着当属性变化时disabled会同步反映为 HTML attribute便于通过 CSS 选择器匹配。渲染层通过?disabled${this.disabled}将disabled透传给内部的原生button元素第 63 行。对应的禁用样式见第 3843 行button[disabled] { opacity: 0.6 !important; background: rgba(0, 0, 0, 0.07); cursor: default; pointer-events: none; }禁用后按钮呈现半透明、浅灰底且不响应鼠标事件的视觉效果。由于内部是真正的button元素键盘焦点管理、表单语义等原生能力天然可用。自定义 CSS 变量组件通过两个 CSS 自定义属性暴露样式定制入口变量作用默认值--wired-icon-size图标slot 内容的数字字号24px--wired-icon-bg-color按钮背景色未设置透明调整图标大小在 src/wired-icon-button.ts 第 5356 行slot 内容的字号直接绑定该变量button ::slotted(*) { position: relative; font-size: var(--wired-icon-size, 24px); }示例对应 examples/icon-button.html 中的.big类style .big { --wired-icon-size: 40px; padding: 16px; } /style wired-icon-button classbig mwc-iconfavorite/mwc-icon /wired-icon-button设置背景色--wired-icon-bg-color由WiredBase提供的基础样式src/wired-base.ts 的BaseCSS消费#overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }叠加层#overlay覆盖整个按钮区域但pointer-events: none不拦截点击事件手绘 SVG 绘制在其上。示例中的.pinkbg即通过该变量实现粉色背景style .pinkbg { color: red; --wired-icon-bg-color: pink; } /style wired-icon-button classpinkbg mwc-iconfavorite/mwc-icon /wired-icon-button颜色跟随 currentColor值得一提的是手绘边框描边颜色并非由专门变量控制而是继承currentColor见 src/wired-base.ts 中path { stroke: currentColor; }。因此给wired-icon-button设置color即可改变手绘圆圈的线条颜色示例中的.red { color: red; }正是利用了这一机制。事件Eventsclick— 按钮被点击时触发。由于组件内部渲染的是原生button元素src/wired-icon-button.ts 第 63 行click事件是浏览器原生事件无需手动派发。使用方式const btn document.querySelector(wired-icon-button); btn.addEventListener(click, () { console.log(icon button clicked); });或者在 HTML 中直接绑定wired-icon-button onclickalert(clicked) mwc-iconfavorite/mwc-icon /wired-icon-button当disabled为true时原生button与样式中的pointer-events: none会共同阻止 click 事件的触发。渲染原理从 WiredBase 到手绘椭圆wired-icon-button的手绘边框并非静态图片而是运行时由 RoughJS 生成的 SVG。理解其原理有助于正确使用与排查尺寸问题。模板结构render()输出的模板src/wired-icon-button.ts 第 6170 行button ?disabled${this.disabled} slot slotchange${this.wiredRender}/slot div idoverlay svg/svg /div /button关键点slot负责分发用户放置的图标内容div idoverlay内的svg是手绘椭圆绘制的画布slotchange事件触发时会重新渲染手绘边框保证图标尺寸变化后边框能自适应。尺寸计算与绘制组件继承WiredBasesrc/wired-base.ts实现两个抽象方法canvasSize()取内部button的getBoundingClientRect()宽高作为画布尺寸第 7278 行draw(svg, size)取宽高中的较小值min将 SVG 设为正方形并在中心调用ellipse()绘制手绘椭圆第 8085 行protected draw(svg: SVGSVGElement, size: Point) { const min Math.min(size[0], size[1]); svg.setAttribute(width, ${min}); svg.setAttribute(height, ${min}); ellipse(svg, min / 2, min / 2, min, min, this.seed); }ellipse()定义于 src/wired-lib.ts 第 108112 行内部调用roughEllipse并返回 RoughJS 生成的path节点this.seed是组件实例创建时随机生成的 31 位整数src/wired-base.ts 第 38 行用于控制手绘笔画的随机抖动——这也解释了为什么每个组件实例的手绘感都不完全一样。渲染触发机制WiredBase.updated()在每次属性/状态更新后自动调用wiredRender()wiredRender()会对比当前画布尺寸与上次记录值仅在尺寸变化时重绘 SVG 并清除旧节点避免无谓的 DOM 操作src/wired-base.ts 第 4459 行。绘制完成后组件会添加wired-rendered类配合BaseCSS中:host从opacity: 0过渡到1的规则实现先隐藏、绘制完成再显示的平滑呈现避免闪烁。交互反馈细节源码中还有两处值得注意的交互细节src/wired-icon-button.ts按下时手绘路径微缩第 4446 行button:active path { transform: scale(0.97) translate(1.5%, 1.5%); }模拟实体按钮被按下的效果键盘聚焦时描边加粗第 4749 行button:focus path { stroke-width: 1.5; }提升无障碍可访问性。进阶与 wired-icon 组合使用除mwc-icon外wired-icon-button还可以与仓库中的实验性组件wired-icon位于 experimental/wired-icon组合把手绘风格延伸到图标本身wired-icon能将任意 SVG 图标转换为手绘版本正好契合 icon button 的手绘按钮 图标场景。在wired-icon-button内部放置wired-icon并利用--wired-icon-size控制图标显示尺寸即可得到内外全部手绘的统一视觉风格。许可协议wired-icon-button随 wired-elements 项目以 MIT License 开源版权归作者 Preet Shihn 所有见 docs/wired-icon-button.md 与 package.json 的 license 字段。小结wired-icon-button是一个实现简洁但细节完整的手绘图标按钮组件用法安装wired-elements后以wired-icon-button标签 slot 内容即可使用支持 npm 模块导入与 CDN 直接加载定制disabled属性控制禁用态--wired-icon-size控制图标字号--wired-icon-bg-color控制背景色color继承机制控制手绘描边颜色事件原生click事件即点即用原理基于WiredBase RoughJS 的 SVG 运行时绘制具备自适应重绘、按下反馈与键盘聚焦样式。想要更完整地查看所有组件用法可以参考仓库中的 examples/icon-button.html 示例以及 docs 目录下其他组件的 API 文档。赞分享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点击查看免费下载相关推荐Material Components Web 图标按钮Icon Button完全指南安装、Toggle 状态管理与源码级实现Material Components Web 图标按钮Icon Button完全指南安装、Toggle 状态管理与源码级实现 本文聚焦于 Materia前端UI组件设计系统Ant Design Button 图标按钮实战icon 属性用法、源码原理与最佳实践Ant Design Button 图标按钮实战icon 属性用法、源码原理与最佳实践 Ant Design 的 Button 组件通过 icon 属性即可将前端UI组件设计系统Shoelace sl-icon-button 图标按钮组件完全指南属性、事件与样式定制Shoelace sl icon button 图标按钮组件完全指南属性、事件与样式定制 sl icon button 是 Shoelace 提供的一种纯图标UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考