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-toggle是 wired-elements 组件库README.md中用于提供**手绘涂鸦风格开关Toggle Switch**的自定义元素适用于线框图Wireframe、原型稿或追求手绘趣味外观的界面场景。本文以 docs/wired-toggle.md 为骨架结合 src/wired-toggle.ts 源码与 examples/toggle.html 官方示例系统讲解其安装引入、属性Properties、CSS 自定义变量、事件机制以及底层绘制原理帮助你在项目中原样复现并自由定制该组件。组件概述wired-toggle是一个基于 Web Components 标准的自定义元素渲染结果是一个手绘描边的开关轨道 内部斜线填充的圆形旋钮旋钮会在开on与关off两种状态间水平滑动并带有平滑过渡动画。从源码结构看它继承自 src/wired-base.ts 中的WiredBase基于 lit 的LitElement所有手绘图形均由 RoughJS 生成轨道使用rectangle()旋钮使用ellipse()描边配合hachureEllipseFill()做斜线填充相关绘制工具定义在 src/wired-lib.ts 中。整个组件的对外行为状态属性、事件、主题变量与普通原生开关一致但视觉上自带随机的手绘抖动效果。安装与引入通过 npm 安装在 JavaScript 项目中添加 wired-elements 依赖npm i wired-elements该包基于 lit 与 roughjs 构建其依赖声明见 package.json。安装后可按需引入单个组件也可以一次性引入全部组件WiredToggle已在 src/wired-elements.ts 中统一导出。在模块代码中引入import { WiredToggle } from wired-elements; // 或按需单独引入体积更小 import { WiredToggle } from wired-elements/lib/wired-toggle.js;直接通过 CDN 加载无需任何构建工具直接在 HTML 页面中以 ES Module 方式加载script typemodule srchttps://unpkg.com/wired-elements/lib/wired-toggle.js?module/script加载完成后wired-toggle自定义元素即可在页面中使用。基础用法在 HTML 中直接书写标签即可使用wired-toggle/wired-toggle wired-toggle checked/wired-toggle第一个开关默认处于关闭off状态第二个开关由于带有checked属性初始即为开启on状态。官方示例 examples/toggle.html 演示了三种形态的用法默认、自定义配色且默认开启、禁用态运行示例时页面中会依次呈现三个开关。Properties属性详解原文档定义了两个公开属性它们在 src/wired-toggle.ts 中以 lit 装饰器声明属性类型默认值说明checkedbooleanfalse开关的选中/开启状态。为true时旋钮滑动到右侧并切换为开主题色disabledbooleanfalse禁用开关。禁用后组件无法交互两个属性既可通过 HTML 属性使用如wired-toggle checked disabled也可通过 JS 属性赋值使用如el.checked true。checked 的渲染与视觉反馈checked会同时驱动两个层面内部复选框状态组件的渲染模板中放置了一个透明的原生input typecheckbox见 src/wired-toggle.tschecked通过.checked${this.checked}与其绑定保证语义与键盘/表单行为与原生 checkbox 一致旋钮位移与配色refreshKnob()src/wired-toggle.ts根据checked为旋钮分组添加或移除checked/uncheckedCSS 类进而触发样式表中的transform: translateX(48px)位移动画src/wired-toggle.ts以及--wired-toggle-on-color/--wired-toggle-off-color的配色切换。disabled 的视觉与交互处理disabled为true时样式表中对应规则src/wired-toggle.ts会让整个宿主元素透明度降为0.4光标变为default通过pointer-events: none屏蔽所有点击交互同时给 SVG 增加淡色背景rgba(0, 0, 0, 0.07)用于呈现轨道底槽的禁用观感。此外内部 checkbox 也通过?disabled${this.disabled}同步禁用从组件与原生控件两个层面共同保证不可交互。Custom CSS Variables自定义主题变量原文档定义了两个 CSS 自定义变量用于控制旋钮knob在两种状态下的填充描边颜色变量作用默认值--wired-toggle-off-color关闭false状态下旋钮的颜色gray--wired-toggle-on-color开启true状态下旋钮的颜色rgb(63, 81, 181)靛蓝色这两个变量在 src/wired-toggle.ts 的样式中作用于path.knobfill的stroke其中knobfill即旋钮内部的斜线填充图形。需要注意的是默认值在源码中通过var(--wired-toggle-off-color, gray)与var(--wired-toggle-on-color, rgb(63, 81, 181))的兜底写法声明因此未设置变量时也会自动回退到默认色。自定义配色示例官方示例 examples/toggle.html 中给出了直接覆盖变量的用法style .custom { --wired-toggle-off-color: red; --wired-toggle-on-color: green; } /style wired-toggle classcustom checked/wired-toggle由于 CSS 变量遵循继承规则你也可以在任意祖先元素上设置变量从而一次性影响该作用域下的所有wired-toggle。轨道toggle-bar的描边颜色则默认跟随currentColor见 src/wired-base.ts 中的path { stroke: currentColor }可通过设置宿主元素的color属性统一调整。Events事件原文档规定组件在状态被用户改变时触发change事件。其触发链路为用户点击透明input typecheckbox或通过键盘空格触发原生change事件冒泡到组件内部监听器onChange()src/wired-toggle.tsonChange()将input.checked写回this.checked刷新旋钮样式通过this.fire(change, { checked: this.checked })派发自定义change事件detail中包含{ checked: boolean }。事件监听示例document.querySelector(wired-toggle).addEventListener(change, (e) { console.log(checked:, e.detail.checked); });从 src/wired-base.ts 的fireEvent实现可见派发的事件设置了bubbles: true与composed: true因此它会跨过 Shadow DOM 边界向上冒泡在父级 DOM 上也能正常监听方便在组件树外层统一处理状态变化。底层实现原理源码级解析画布尺寸与结构canvasSize()src/wired-toggle.ts返回固定尺寸[80, 34]即整个开关的内置画布为 80×34 像素。draw()src/wired-toggle.ts在该画布上绘制两层图形轨道rectangle(svg, 16, 8, 48, 18, seed)即一个位于 (16,8)、宽 48、高 18 的手绘圆角矩形作为开关的滑轨槽旋钮一个g classknob分组内部包含hachureEllipseFill(16, 16, 32, 32, seed)斜线填充圆与ellipse(16, 16, 32, 32, seed)手绘描边圆直径 32 像素正好与 48 像素宽的轨道行程匹配——这也解释了样式表中开启态位移translateX(48px)的由来旋钮从左侧起点平移一个轨道的宽度。手绘效果的来源每次绘制都使用组件初始化时生成的随机seed见 src/wired-base.ts并透传给 src/wired-lib.ts 中封装 RoughJS 的rectangle/ellipse/hachureEllipseFill。由于 seed 随机每次渲染的手绘抖动轨迹都略有不同这正是手绘感的来源WiredBase.wiredRender()src/wired-base.ts负责在尺寸变化时重绘并标记wired-rendered类使组件从透明变为可见。可访问性设计从源码结构看组件刻意保留了语义化的原生 checkbox透明覆盖在整个开关之上并重写了focus()方法src/wired-toggle.ts将焦点委托给内部 input因此wired-toggle支持 Tab 聚焦、空格切换等键盘操作兼顾了表单语义与无障碍体验。完整可运行示例综合以上内容一个同时覆盖基础用法、禁用态与自定义配色的完整页面如下!DOCTYPE html html head script typemodule srchttps://unpkg.com/wired-elements/lib/wired-toggle.js?module/script style body { font-family: sans-serif; padding: 20px; } wired-toggle { margin: 12px; } .custom { --wired-toggle-off-color: #e91e63; --wired-toggle-on-color: #4caf50; } /style /head body wired-toggle/wired-toggle wired-toggle checked/wired-toggle wired-toggle classcustom checked/wired-toggle wired-toggle disabled/wired-toggle script const t document.querySelectorAll(wired-toggle); t.forEach((el) { el.addEventListener(change, (e) { console.log(change:, e.target, e.detail.checked); }); }); /script /body /html小结引入方式npm 安装后按需import或通过 unpkg 直接加载 ES Module核心属性checked开/关状态、disabled禁用默认false主题定制--wired-toggle-off-color默认gray与--wired-toggle-on-color默认rgb(63, 81, 181)事件用户切换时触发changee.detail.checked携带最新状态实现要点80×34 固定画布 RoughJS 手绘轨道与旋钮 48px 位移动画 透明原生 checkbox 保证语义与可访问性。对于需要快速获得手绘/线框风格开关的产品原型或演示页面wired-toggle是一个即插即用、且支持通过 CSS 变量深度定制配色的轻量方案。本文对应的官方文档为 docs/wired-toggle.md完整组件实现见 src/wired-toggle.ts组件遵循 LICENSE 中的 MIT 许可。赞分享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-radio-group手绘风格单选组组件完整使用与源码解析wired elements 之 wired radio group手绘风格单选组组件完整使用与源码解析 导读 wired radio group 是 wirUI组件前端PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器 PlantUML4IDEA是一款专为IntelliJ IDEA平台打开发工具IDEGitHub_Trending/ma/machine-learning-for-trading中的无监督学习PCA与聚类分析GitHub_Trending/ma/machine learning for trading中的无监督学习PCA与聚类分析 在量化交易领域无监督学习技术能示例工程金融科技机器学习人工智能深度学习创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
Atlas 300V推理加速卡YOLO部署全攻略：从模型转换到NPU推理 后台私信里问“atlas 300v 24g 是运算加速卡吗”的人，比问“怎么部署yolo”的还多。这个现象挺有意思，因为大部分新手拿到Atlas 300V这类昇腾推理卡时，第一反应不是“我能跑什么网络”，而是“这玩意儿到底算不算加速卡、能不能直接… · 2026/9/23 22:16:53
基于arXiv API的每日论文自动分析系统：从数据拉取到趋势追踪 1. 一份日报的诞生：为什么要做 arXiv 每日论文分析每天早上刷 arXiv 的人不少，但真正能把当天上百篇新论文筛明白的人不多。我自己做计算机视觉和机器人方向的研究，前几年养成了一个习惯：每天花二十分钟扫一遍 arXiv 的 cs.CV、cs… · 2026/9/23 22:16:53
Octop：Python工程团队的本地开发环境一致性治理工具 1. 项目概述：Octop 是什么，它解决的不是“安装问题”，而是工程协同的隐性成本Octop 这个名字乍看像某个开源工具、CLI 命令或轻量级框架，但结合热搜词 Python、Ruff、MIT、PostgreSQL，再叠加当前开发者社区高频出现的“… · 2026/9/23 22:16:53
LSTM时间序列预测实战：Python源码解析与调参避坑指南 简介：基于LSTM的时间序列分析预测Python源码，面向数据科学、人工智能方向的学习者与开发者。项目以空气污染数据为例，完整覆盖数据加载与归一化、LSTM模型构建（基于Keras/TensorFlow）、模型训练、评估与未来值预测等环… · 2026/9/23 23:01:53
长尾商品销量预测：基于DNN的时序预测与特征工程实战 简介：面向供应链备货中的长尾商品销量预测难题，这份基于TensorFlow 1.13编写的DNN项目源码，提供了7天、30天和60天三档预测的实现思路，适合有一定Python基础、希望借助低阶API掌握模型训练与部署的开发者。压缩包共6个文件&#x… · 2026/9/23 23:01:53
EverOS 记忆工作原理：Markdown 为源、SQLite 与 LanceDB 为派生索引的分层存储与同步管线 EverOS 记忆工作原理：Markdown 为源、SQLite 与 LanceDB 为派生索引的分层存储与同步管线 【免费下载链接】EverOS One portable memory layer for every AI agent: local-first, Markdown-native, user-owned, and self-evolving across apps, tools, and workflow… · 2026/9/23 23:01:41
鸵鸟目标检测数据集：419张VOC+YOLO双格式标注 简介：本资源是一份面向计算机视觉初学者与目标检测实践者的鸵鸟图像数据集，适用于YOLO、Faster R-CNN等主流检测模型的训练与验证。数据集共419张高质量JPG图像（1–500KB），全部标注为单一类别“ostrich”，并… · 2026/9/23 23:01:35
SAP按销售订单采购生产：从销售订单到采购申请与生产工单的MRP配置链路 简介：这份文档面向制造业与流通业中从事SAP实施、运维及成本核算的顾问与财务人员，聚焦按销售订单采购生产这一典型场景，解决从销售订单触发采购、生产到结算全流程的配置与操作落地问题。资源包共1个doc文件，约122KB，… · 2026/9/23 23:01:35
Python京东价格监控系统实战：爬虫、SQLite与定时提醒 简介：基于Python的京东价格监控系统完整源码，面向有商品比价需求的Python学习者和开发者，解决手动查看价格信息滞后、无法及时决策的痛点。系统整合Requests与Selenium两种爬取方式，支持通过JS接口或页面渲染获取价格，… · 2026/9/23 23:01:28
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
