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-fab 是 wired-elements 系列中一个手绘素描风的浮动操作按钮Floating Action Button专门用于线框图wireframe、原型设计或追求趣味手绘感的页面场景。本文基于仓库中的 docs/wired-fab.md 官方文档结合 src/wired-fab.ts 源码与 examples/fab.html 示例完整讲解 wired-fab 的安装引入、属性、样式定制、事件监听并深入剖析它如何用 RoughJS 绘制出圆形斜线填充的手绘外观。读完本文你将掌握 wired-fab 的完整 API 用法并理解其从渲染到重绘的源码级原理。组件概览wired-fab 是什么wired-fab 是一个圆形的手绘风格按钮视觉上是用铅笔手绘出来的实心圆 居中的图标通常作为 Material Design 中的 Floating Action ButtonFAB使用——即页面右下角悬浮的圆形主要操作按钮。它继承自 src/wired-base.ts 中的WiredBase基于 Lit 的LitElement并在 src/wired-elements.ts 中被整体导出因此你可以通过import { WiredFab } from wired-elements直接使用。从 package.json 可以确认该组件的技术底座框架lit^2.0.0-rc.1负责自定义元素、属性响应与模板渲染绘图roughjs^4.3.1负责生成手绘风格的 SVG 路径打包type: module产物入口为lib/wired-elements.js并提供.d.ts类型声明。安装与引入方式一npm 安装后按需导入先为项目安装 wired-elementsnpm i wired-elements然后在你的模块代码中导入组件。官方文档给出了两种等价写法import { WiredFab } from wired-elements; // 或者按子模块精确导入减小打包体积 import { WiredFab } from wired-elements/lib/wired-fab.js;第一种写法会从lib/wired-elements.js聚合入口导入src/wired-elements.ts 中export * from ./wired-fab等所有组件均由此导出第二种写法只加载wired-fab单个模块适合需要控制包体大小的场景。方式二CDN 直接加载到 HTML 页面如果你不想搭建构建流程可以直接在 HTML 中通过 ES Module 加载script typemodule srchttps://unpkg.com/wired-elements/lib/wired-fab.js?module/script仓库内的 examples/fab.html 演示了完整用法它同时通过 CDN 引入了 Material 图标组件mwc-icon与字体样式供 FAB 内部放置图标link hrefhttps://fonts.googleapis.com/css?familyMaterialIconsdisplayblock relstylesheet script typemodule srchttps://unpkg.com/material/mwc-icon?module/script script typemodule src../lib/wired-fab.js/script基础使用在 HTML 中放置 FAB官方文档给出的最小用法如下将wired-fab当作普通按钮标签使用即可内部通过 slot 放入图标内容wired-fab idbtn1 mwc-iconfavorite/mwc-icon /wired-fab wired-fab idbtn2 classred mwc-iconclose/mwc-icon /wired-fab从源码 src/wired-fab.ts 的render()方法可以看到其内部结构render(): TemplateResult { return html button ?disabled${this.disabled} div idoverlay svg/svg /div slot slotchange${this.wiredRender}/slot /button ; }即一个原生button承载交互一个svg覆盖层承载手绘图形pointer-events: none不拦截点击一个slot用于插入你的图标或任意内容。图标插入后触发slotchange事件重新绘制手绘圆保证尺寸变化时图形能跟随刷新。属性Properties官方文档声明 wired-fab 只有一个对外属性disabled— 禁用按钮默认值为false。源码 src/wired-fab.ts 中的定义与之对应property({ type: Boolean, reflect: true }) disabled false;type: Boolean以布尔语义处理属性标签上只要出现disabled即为truereflect: true属性值变化会同步反映到 DOM 属性上便于 CSS 选择器与无障碍工具读取使用方式wired-fab disabled或在 JS 中设置fab.disabled true。禁用态同样由源码样式定义src/wired-fab.ts按钮透明度降为0.6、背景变为半透明黑、cursor: default且pointer-events: none从而阻止一切点击。自定义样式Custom CSS Properties官方文档给出了核心自定义属性--wired-fab-bg-color— FAB 的背景色默认值为#018786深青色。前景色即图标颜色通过设置color属性来控制。在源码中--wired-fab-bg-color实际作用于手绘圆的描边颜色src/wired-fab.tspath { stroke: var(--wired-fab-bg-color, #018786); stroke-width: 3; fill: transparent; }需要注意的是这个背景色并非传统background-color而是手绘圆的铅笔描边颜色圆内部由斜线填充hachure完成视觉上呈现手绘质感。而color属性通过继承链传递给 slot 内的图标:host默认color: #fff白色前景。示例中.red类只改了color: red图标即变为红色而圆仍保持默认深青色。此外examples/fab.html 中还展示了两个可复用的扩展--wired-icon-size控制图标尺寸默认24px源码 src/wired-fab.ts示例中.big类将其设为40px并加大padding做出大号 FAB通过padding可整体改变 FAB 圆形区域的大小手绘圆会随button的实际尺寸自动重绘。综合示例来自 examples/fab.htmlwired-fab classpinkbg mwc-iconfavorite/mwc-icon /wired-fab.pinkbg { color: red; --wired-fab-bg-color: pink; }事件Events官方文档声明 wired-fab 触发原生click事件——按钮被点击或通过键盘提交时触发。由于内部使用的是原生button元素你可以像监听普通按钮一样监听它document.getElementById(btn1).addEventListener(click, (e) { console.log(FAB clicked, e); });同时disabled状态会由浏览器原生保证 click 不被触发。交互反馈方面源码样式src/wired-fab.ts为图标增加了细节动效聚焦或按下时图标透明度升至1按下时还会放大到1.15倍让手绘按钮依然有清晰的按压缩放反馈。源码原理手绘圆形是如何画出来的wired-fab 的核心视觉来自 src/wired-base.ts 定义的重绘管线WiredBase在每次updated()后调用wiredRender()后者通过子类实现的canvasSize()获取按钮尺寸清空旧 SVG 并调用draw()重绘尺寸未变化时跳过重绘以节省开销。wired-fab 的两个抽象实现src/wired-fab.tsprotected canvasSize(): Point { if (this.button) { const size this.button.getBoundingClientRect(); return [size.width, size.height]; } return this.lastSize; } protected draw(svg: SVGSVGElement, size: Point) { const min Math.min(size[0], size[1]); const g hachureEllipseFill(min / 2, min / 2, min, min, this.seed); svg.appendChild(g); }其绘制逻辑可以概括为三点取短边定圆取按钮宽高的较小值min以(min/2, min/2)为圆心、min × min为外接矩形画一个内切圆保证 FAB 始终是正圆形斜线填充hachureEllipseFill定义于 src/wired-lib.ts按角度步进采样椭圆轮廓顶点再交给 RoughJS 的ZigZagFiller生成手绘斜线填充图案从而形成铅笔草图式的实心圆效果随机种子WiredBase在组件初始化时为每个实例生成随机seedsrc/wired-base.ts使每次创建/重绘的笔迹抖动都不同这正是每次看起来都是随手画的手绘感来源。相同逻辑也被wired-spinner、wired-toggle等组件复用。完整可运行示例将以下内容保存为 HTML 文件即可在本地体验 wired-fab 的全部形态对照 examples/fab.htmlhtml head link hrefhttps://fonts.googleapis.com/css?familyMaterialIconsdisplayblock relstylesheet script typemodule srchttps://unpkg.com/material/mwc-icon?module/script script typemodule srchttps://unpkg.com/wired-elements/lib/wired-fab.js?module/script style body { padding: 10px; font-family: sans-serif; line-height: 1.5; } wired-fab { margin: 0 10px; } .big { --wired-icon-size: 40px; padding: 16px; } .red { color: red; } .pinkbg { color: red; --wired-fab-bg-color: pink; } /style /head body wired-fabmwc-iconfavorite/mwc-icon/wired-fab wired-fab classredmwc-iconfavorite/mwc-icon/wired-fab wired-fab classpinkbgmwc-iconfavorite/mwc-icon/wired-fab wired-fab classbigmwc-iconfavorite/mwc-icon/wired-fab wired-fab disabledmwc-iconfavorite/mwc-icon/wired-fab /body /html小结wired-fab 用最少的 API一个disabled属性、一个click事件、一个--wired-fab-bg-color自定义属性提供了完整的 FAB 能力圆形手绘外观、slot 图标插槽、禁用态与按压缩放反馈一应俱全。若想深入了解其姊妹组件的手绘实现可继续阅读 docs 目录下其他组件的文档以及 src/wired-lib.ts 中的绘图工具函数。本项目采用 MIT 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点击查看免费下载相关推荐10个你不知道的LyricsX技巧让macOS歌词显示更智能、更个性化10个你不知道的LyricsX技巧让macOS歌词显示更智能、更个性化 LyricsX是一款专为macOS设计的终极歌词应用它能让你在欣赏音乐的同时获得更桌面应用Material UIMUIReact 浮动操作按钮 Fab 组件用法、尺寸、动画与源码实现全解Material UIMUIReact 浮动操作按钮 Fab 组件用法、尺寸、动画与源码实现全解 本篇基于 MUI 仓库中 Floating Action前端UI组件设计系统Material Web 浮动操作按钮FAB完全指南md-fab 与 md-branded-fab 的用法、尺寸、主题定制与源码解析Material Web 浮动操作按钮FAB完全指南md fab 与 md branded fab 的用法、尺寸、主题定制与源码解析 FABFloatiUI组件前端设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考