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 是一套以手绘hand-drawn线条为视觉核心的基础 UI 组件库适合快速搭建线框图wireframe、原型mockup或为产品注入轻松、有趣的涂鸦风格。本文将以仓库根目录 README.md 为骨架系统讲解其安装方式、两种模块引入途径、HTML 中的实际用法、全部 25 个组件的清单与 API 文档入口并结合 src/wired-base.ts、src/wired-lib.ts 等源码揭示手绘效果究竟是如何由 Lit 与 RoughJS 协作渲染出来的。读完本文你将能够在任意现代浏览器环境中独立接入 wired-elements并理解其渲染流水线与样式定制原理。一、wired-elements 是什么根据 README.md 的官方描述Wired Elements 是一系列具有手绘外观的基础 UI 元素basic UI Elements可用于线框图、原型图或者仅仅为了追求有趣的手绘视觉效果。它不是一个单体框架而是一组基于 Web Components 标准封装的草图风格控件集合。每个控件都是一个独立的自定义元素例如wired-button、wired-input、wired-card它们的边框、填充与阴影都不是平滑的 CSS 线条而是带有随机扰动、轻微抖动的手绘笔迹让界面看起来像画在纸上一样。从 package.json 中可以确认项目的技术底座{ name: wired-elements, version: 3.0.0-rc.7, description: Collection of hand-drawn sketchy web components, type: module, main: lib/wired-elements.js, module: lib/wired-elements.js, types: lib/wired-elements.d.ts, dependencies: { lit: ^2.0.0-rc.1, roughjs: ^4.3.1 } }lit负责组件生命周期、响应式属性reactive properties与模板渲染roughjs负责生成具有手绘感的 SVG 路径随机偏移、弯曲等TypeScript源码以.ts编写编译产物输出到lib/目录并同时生成.d.ts类型声明文件仓库当前版本为3.0.0-rc.7采用 ESMtype: module模块格式。二、组件全景25 个手绘控件一览所有组件统一通过 src/wired-elements.ts 汇总导出源码中的导出语句即为官方维护的完整组件清单组件自定义元素标签典型用途wired-buttonwired-button手绘按钮支持 elevation 立体阴影wired-cardwired-card手绘卡片容器支持填充纹理wired-checkboxwired-checkbox手绘复选框wired-combowired-combo手绘下拉组合框wired-dialogwired-dialog手绘对话框wired-dividerwired-divider手绘分隔线wired-fabwired-fab浮动操作按钮wired-icon-buttonwired-icon-button图标按钮wired-imagewired-image手绘相框图片容器wired-inputwired-input文本输入框wired-itemwired-item列表项wired-linkwired-link手绘链接wired-listboxwired-listbox列表框wired-progresswired-progress水平进度条wired-progress-ringwired-progress-ring环形进度wired-radio / wired-radio-groupwired-radio/wired-radio-group单选按钮及分组wired-search-inputwired-search-input搜索输入框wired-sliderwired-slider滑块wired-spinnerwired-spinner手绘加载指示器wired-tab / wired-tabswired-tab/wired-tabs选项卡与选项卡组wired-textareawired-textarea多行文本域wired-togglewired-toggle开关wired-videowired-video手绘视频播放容器说明wired-elements包导出的组件来自 src/wired-elements.ts 的 25 条导出语句共对应 24 个组件文件wired-radio与wired-radio-group分属不同文件。README 中提到的完整列表位于项目的 src 目录下与上述清单一致。三、安装npm 与 CDN 两种方式README 提供了两种接入方式开发者可以根据项目形态任选其一。3.1 通过 npm 安装将 wired-elements 作为依赖加入你的 JavaScript 项目npm i wired-elements安装完成后node_modules/wired-elements/lib/下即为编译好的 ESM 模块文件与类型声明可直接被现代打包器Vite、Webpack、Rollup 等按模块解析。3.2 通过 CDN 直接加载如果不想引入构建步骤可以跳过打包直接以 ES module 的形式在 HTML 页面中加载。README 给出的方式是使用 unpkg 之类的 npm CDNscript typemodule srchttps://unpkg.com/wired-elements?module/script加载后页面即注册了全部wired-*自定义元素。这种方式非常适合单页演示、CodePen / JSFiddle 类在线编辑器或静态原型页面。3.3 按需引入单个组件除了整包引入README 还强调可以按需导入单个组件模块对应 docs/wired-button.md 中同样的写法以减少包体积import { WiredButton } from wired-elements/lib/wired-button.js; import { WiredInput } from wired-elements/lib/wired-input.js;四、使用两种导入方式与 HTML 标记4.1 在模块脚本中导入在你的 JavaScript / TypeScript 模块中导入所需组件import { WiredButton, WiredInput } from wired-elements;或者按组件文件精确导入适合 tree-shakingimport { WiredButton } from wired-elements/lib/wired-button.js; import { WiredInput } from wired-elements/lib/wired-input.js;两种写法等价区别仅在于整包导入会注册全部组件而单文件导入只注册对应元素。4.2 在 HTML 中使用导入后就可以像使用原生标签一样在 HTML 中声明组件wired-input placeholderEnter name/wired-input wired-buttonClick Me/wired-button仓库中的 examples/button.html 给出了一个可直接运行的完整示例页面展示了按钮的多种形态script typemodule src../lib/wired-button.js/script wired-button idbtn1Submit/wired-button wired-button elevation5 idbtn2Hello, world!/wired-button wired-button disabled idbtn1Submit/wired-button并且该示例还演示了手绘组件同样可以通过普通 CSS 进行外观定制如background: yellow; color: red;因为组件宿主元素的颜色会通过currentColor传递到 SVG 路径的描边这一点在 src/wired-base.ts 的BaseCSS中可以看到path { stroke: currentColor; ... }。4.3 事件与交互手绘组件并非静态图片它们具备完整的交互能力。以wired-button为例docs/wired-button.md 明确列出其唯一事件click— 按钮被点击或提交时触发。从源码看src/wired-button.ts 内部渲染的是一个真实button元素内部包含slot用于插入内容因此原生 click 事件可以正常冒泡也天然支持键盘聚焦button:focus path { stroke-width: 1.5 }会在聚焦时加粗手绘描边与禁用态disabled时opacity: 0.6且pointer-events: none。五、组件 API属性、事件与样式变量README 明确指出每个组件的属性properties、事件events、CSS 属性css-properties等细节均收录在 docs 目录下共 25 份独立文档与组件一一对应组件文档说明docs/wired-button.md按钮elevation、disabled、clickdocs/wired-input.md输入框placeholder、type、value 等docs/wired-card.md卡片elevation、filldocs/wired-checkbox.md复选框docs/wired-combo.md组合下拉框docs/wired-dialog.md对话框docs/wired-divider.md分隔线docs/wired-fab.md浮动按钮docs/wired-icon-button.md图标按钮docs/wired-image.md图片容器docs/wired-item.md列表项docs/wired-link.md链接docs/wired-listbox.md列表框docs/wired-progress.md水平进度条docs/wired-progress-ring.md环形进度docs/wired-radio.md / docs/wired-radio-group.md单选与分组docs/wired-search-input.md搜索框docs/wired-slider.md滑块docs/wired-spinner.md加载指示器docs/wired-tabs.md选项卡docs/wired-textarea.md文本域docs/wired-toggle.md开关docs/wired-video.md视频容器5.1 以 wired-button 为例解读属性约定docs/wired-button.md 给出了最具代表性的两个属性elevation—Number取值 15含端点用于给按钮一个素描高度即手绘的立体阴影层数默认值为 1。disabled—Boolean禁用按钮默认值为 false。对应 src/wired-button.ts 中的声明property({ type: Number }) elevation 1; property({ type: Boolean, reflect: true }) disabled false;在draw()方法中elevation会先被钳制到[1, 5]区间Math.min(Math.max(1, this.elevation), 5)随后除了最外层的手绘矩形外每增加 1 层 elevation 就额外绘制两条半透明的阴影边线其透明度随层数递减(75 - i * 10) / 100从而在视觉上形成手绘铅笔叠加出的立体感。disabled声明了reflect: true会同步反映到元素属性上同时内部button也被设置为disabled。5.2 wired-input贴近原生表单的属性面src/wired-input.ts 展示了输入类组件对原生表单属性的完整代理包括placeholder、name、type默认text、min/max/step、autocomplete、autocapitalize、autocorrect、required、autofocus、readonly、minlength/maxlength、size等并通过value的 getter/setter 暴露读写接口将change与input事件以CustomEvent的形式重新抛出this.fire(event.type, { sourceEvent: event })方便宿主监听。这也印证了 README 所强调的每个组件 API 细节见 docs 目录的价值——不同组件属性差异较大使用前应查阅对应文档。六、底层原理Lit RoughJS 如何画出手绘感README 的 Credits 部分明确说明wired-elements 基于 RoughJS 与 Lit 构建。两者在架构中各司其职下面结合源码拆解其渲染流水线。6.1 统一的绘制基类 WiredBase几乎所有组件都继承自 src/wired-base.ts 中的抽象类WiredBase继承自 Lit 的LitElement。它定义了手绘组件的公共渲染协议seed随机种子每个组件实例在构造时生成一个0 ~ 2^31之间的随机整数Math.floor(Math.random() * 2 ** 31)后续所有手绘扰动都基于该 seed保证同一实例多次重绘时线条形状稳定而不同实例之间又各不相同wiredRender()在组件updated()后触发。它先通过抽象方法canvasSize()获取当前尺寸若尺寸未变化则跳过重绘避免不必要的 SVG 重建尺寸变化时清空svg子节点、设置宽高再调用抽象方法draw(svg, size)真正绘制图形最后为宿主元素加上wired-renderedclass使组件从透明渐变为可见BaseCSS所有组件共享的基础样式——默认宿主opacity: 0渲染完成后opacity: 1避免闪烁白板path元素默认stroke: currentColor; stroke-width: 0.7; fill: transparent这正是手绘轮廓继承文字颜色的实现来源。6.2 wired-lib封装 RoughJS 的绘图工具箱src/wired-lib.ts 是连接 Lit 与 RoughJS 的桥梁。它从roughjs/bin/renderer引入line、rectangle、ellipse、polygon、arc等底层渲染函数并统一通过options(seed)构造 RoughJS 的解析选项function options(seed: number): ResolvedOptions { return { maxRandomnessOffset: 2, // 随机偏移上限控制线条抖动幅度 roughness: 1, // 粗糙度 bowing: 0.85, // 线条弯曲程度 stroke: #000, strokeWidth: 1.5, fillStyle: hachure, // 填充样式剖面线 hachureAngle: -41, hachureGap: 5, seed // 关键随机种子 }; }随后opsToPath()将 RoughJS 返回的绘图指令move/bcurveTo/lineTo转换为标准的 SVGd路径字符串最终通过createPathNode()生成path元素挂到svg上。rectangle()、line()、ellipse()、arc()、hachureFill()等导出函数即其他组件绘制时调用的基础图元。以 src/wired-button.ts 的draw()为例先用rectangle()画出手绘矩形轮廓再按 elevation 层数循环调用line()绘制阴影边线。而 src/wired-card.ts 的draw()则在轮廓之外通过hachureFill()为卡片填充剖面线纹理对应fill属性并定义了--wired-card-background-fill这一 CSS 变量供外部定制填充颜色——这就是 docs 中所说 css-properties 的具体来源。6.3 尺寸响应ResizeObserver 与窗口 resize 兜底手绘 SVG 需要跟随组件尺寸变化而重绘。从源码可见多数组件如 src/wired-button.ts、src/wired-input.ts在构造函数中检测window.ResizeObserver并观察内部元素src/wired-card.ts 则在缺少 ResizeObserver 的环境下退化为监听window.resize事件。因此这类组件在现代浏览器与部分旧环境下均能保持手绘轮廓与内容尺寸同步。七、演示与示例README 提供了官方在线演示所有组件的 showcase 页面并针对 React、Vue、Svelte 提供了框架集成沙盒方便在不同技术栈中快速试玩。如果希望在本地查看仓库 examples 目录提供了与组件一一对应的纯 HTML 示例页面共 23 个例如examples/button.html按钮的 elevation、disabled、自定义样式演示examples/input.html输入框演示examples/card.html卡片与填充演示examples/dialog.html、examples/tabs.html、examples/slider.html 等覆盖其余组件。运行方式由于组件以 ES module 形式加载需要本地起一个静态 HTTP 服务直接file://打开会受模块跨域限制。在仓库根目录执行python3 -m http.server或npx serve后访问examples/button.html即可看到手绘按钮效果。八、从源码构建wired-elements 使用 TypeScript 编写编译配置见 tsconfig.json目标ES2017、模块ES2015、开启strict严格模式与装饰器支持experimentalDecorators: true产物输出到lib/。构建命令定义在 package.json 的 scripts 中npm run build该命令等价于tsc会同时产出lib/*.js与lib/*.d.ts类型声明供发布到 npm 后由import { WiredButton } from wired-elements/lib/wired-button.js使用。九、兼容性与前置条件wired-elements 是基于标准 Web Components 规范Custom Elements Shadow DOM实现的自定义元素集合README 也引导读者通过 Web Components 规范文档了解其底层机制。因此使用时需要现代浏览器支持 Custom Elements v1、Shadow DOM、ES Module 的浏览器均可直接运行无需框架原生 Web Components 可直接用于任意框架项目Vue、React、Svelte 中通过模板/属性绑定使用这也是 README 专门提供各框架沙盒的原因尺寸响应依赖组件重绘依赖ResizeObserver若运行环境不支持部分组件如 card会退化为监听window.resize极端情况下可能需要手动触发重绘。十、许可证与致谢wired-elements 以 MIT License 开源作者为 Preet Shihn。README 致谢部分明确其构建基石为RoughJS手绘图形渲染库与LitWeb Components 基础库——前者负责手绘感后者负责组件化二者缺一不可。得益于 MIT 协议你可以自由地将这套手绘组件用于商业项目、原型工具或任何需要未完成感设计语言的场景。结语从 npm 安装到 CDN 直引从整包导入到按需加载再到wired-render渲染流水线与 RoughJS 的随机种子机制wired-elements 用不到百行核心基类就搭建起了一整套会呼吸的手绘 UI。对原型设计、线框评审、教学演示类产品而言它是成本极低、风格鲜明的开箱即用方案对想要研究手绘 SVG 生成的开发者而言src/wired-lib.ts 与 src/wired-base.ts 又是极佳的学习样本。现在打开 examples 里的任一页面开始你的涂鸦式界面之旅吧。赞分享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点击查看免费下载相关推荐mlx-community/Fara-7B-4bit性能测试M2 Pro上的解码速度与内存占用实测mlx community/Fara 7B 4bit性能测试M2 Pro上的解码速度与内存占用实测 在AI大模型普及的今天本地部署的性能表现成为开发者和用户flask-restful-swagger源码解析Swagger规范提取的实现原理flask restful swagger源码解析Swagger规范提取的实现原理 flask restful swagger是一个专为Flask RESTf后端开发工具PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器 PlantUML4IDEA是一款专为IntelliJ IDEA平台打开发工具IDE创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考