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），仅供参考
