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），仅供参考
企业数字化 ERP 产品动态
相关推荐
差动放大电路如何抑制零点漂移：原理、设计与实测 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:51:37
创芯CAN分析仪兼容周立功CANTest：DLL替换与驱动配置实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:51:12
九州PTV-8698刷机教程：海思Hi3798MV100刷当贝桌面全网通 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:51:00
从 Chat 到 Agent，2026 年到底变了什么？ 一、先说结论：变的不是模型，是"它有没有闭环"
咱们先把 Chat 那套老逻辑捋一遍。你给它一段话，它还你一段话，单次前向推理，无状态、无副作用。说白了就是个"嘴替"，说完就完了。
它的天… · 2026/9/24 16:05:13
webnovel-writer 冲突设计实战：5 步把网文冲突引擎铺进卷纲 webnovel-writer 冲突设计实战：5 步把网文冲突引擎铺进卷纲 【免费下载链接】webnovel-writer 基于 Claude Code 的长篇网文辅助创作系统，解决 AI 写作中的「遗忘」和「幻觉」问题，支持 200 万字量级 连载创作。 项目地址: https://gitcode… · 2026/9/24 16:05:07
Accelerate 模型量化实战：基于 bitsandbytes 的 8-bit / 4-bit 模型加载与推理 人工智能深度学习分布式训练 【免费下载链接】accelerate 🚀 A simple way to launch, train, and use PyTorch models on almost any device and distributed configuration, automatic mixed precision (including fp8), and easy-to-configure FSDP and DeepSpee… · 2026/9/24 16:05:07
Django实现xAdmin后台根据身份设置字段只读 在Django开发的后台管理中，常常需要根据用户的身份来设置不同的权限，例如控制某些字段是否可编辑。通常情况下，xadmin允许开发者全局设置字段为只读，但更灵活的需求（如仅超级用户可编辑）则需要通过自定义来实现。
本文将通过多个步骤，介绍如何在xadmin中根据用户身份设… · 2026/9/24 16:05:01
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
