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-link 是 wired-elements 组件库中一个将原生a锚点/链接包装为手绘hand-drawn风格的 Web Component。它专门用于线框图wireframe原型或追求涂鸦视觉风格的页面让普通超链接的底部下划线变成一条条带有抖动笔触的“手绘”线段。读完本文你将掌握 wired-link 的安装引入方式、elevation/href/target三个核心属性与自定义下划线颜色的完整用法并从源码层面理解其手绘下划线是如何基于 Rough.js 绘制出来的。一、wired-link 是什么wired-elements 是一套“看起来像手绘”的自定义元素集合详见仓库 README.mdwired-link 正是其中的链接组件。与原生a相比它保留了链接的所有语义与交互可点击跳转、支持href与target同时用抖动的 SVG 手绘线段替代浏览器默认的平滑下划线实现 docs/wired-link.md 中所说的 Hand-drawn sketchy Anchor/Link web component。从源码结构看WiredLink类定义于 src/wired-link.ts并作为聚合导出的一部分出现在 src/wired-elements.ts 的export * from ./wired-link中——这意味着你可以从wired-elements总入口一次性引入也可以单独引入该模块。二、安装与引入方式wired-elements 以 npm 包形式发布当前仓库版本为3.0.0-rc.7见 package.json是一个 ESM 模块包type: module依赖 lit 2.x 与 roughjs 4.x。1. 通过 npm 安装npm i wired-elements2. 在 JavaScript/TypeScript 中按模块引入// 方式一从聚合入口引入 import { WiredLink } from wired-elements; // 方式二直接引入单个模块文件 import { WiredLink } from wired-elements/lib/wired-link.js;两种方式等价lib/目录为 TypeScript 源码经编译后的产物outDir: ./lib见 tsconfig.json。引入后wired-link自定义元素即被注册可直接在 HTML 中使用。3. 通过 CDN 直接在 HTML 页面加载script typemodule srchttps://unpkg.com/wired-elements/lib/wired-link.js?module/script对于快速原型或纯静态演示场景这种方式无需任何构建步骤。仓库中的 examples/link.html 即采用此思路本地路径script typemodule src../lib/wired-link.js/script演示了 wired-link 的三种典型用法。三、基础用法引入组件后在 HTML 中直接书写wired-link标签即可wired-link href/more.htmlLearn more/wired-link wired-link elevation3 href/more.html target_blankElevation/wired-link第一行使用默认样式的手绘链接href指向/more.html第二行通过elevation3将下划线加粗到 3 层笔触并通过target_blank让链接在新窗口/新标签页打开。在 examples/link.html 中可以看到更贴近实战的写法——把 wired-link 直接嵌进段落文字流中与wired-button、wired-input等其他组件联动包括target_blank的“新标签页打开”示例。由于组件默认display: inline-block见源码样式表它可以像内联元素一样自然融入文本段落。四、核心属性详解wired-link 共暴露三个公开属性全部在 src/wired-link.ts 中以 lit 装饰器声明属性类型默认值说明elevationNumber1手绘下划线的层数高度取值范围 15含两端hrefString无链接指向的页面 URLtargetString无链接的目标窗口语义同原生a的target1. elevation —— 下划线“高度”文档明确指出其为 15含之间的数字默认 1。从源码实现看该值会被强制收敛到合法区间const elev Math.min(Math.max(1, this.elevation), 5);这段逻辑同时出现在canvasSize()与draw()中意味着即使传入0或100实际生效值也会被钳制到 15。elevation的值决定了手绘下划线由多少条独立线段堆叠而成值越大链接下方的手绘“墨迹”越厚视觉上越醒目。2. href —— 跳转地址即链接的目标 URL最终被渲染到内部a元素的href属性上见下文渲染模板。不设置href时渲染出的a hrefundefined不会发生跳转链接退化为纯视觉元素适合仅用于装饰或占位场景。3. target —— 打开方式语义与原生a的target完全一致常用值如_blank新标签页打开、_self当前页打开。在渲染时未设置或为空字符串时会渲染为target等价于默认的当前页行为。五、自定义样式手绘下划线颜色wired-link 通过两个 CSS 通道控制颜色--wired-link-decoration-color手绘下划线的颜色默认值为blue。这是 wired-link 唯一对外暴露的自定义 CSS 属性Custom CSS Propertycolor链接前景文字颜色。源码样式表中a, a:hover, a:visited { color: inherit; }表明文字颜色继承自宿主上下文因此直接设置组件的color即可改变文字颜色而无需分别处理:hover、:visited等伪类。典型用法style .red-link { --wired-link-decoration-color: #e53935; color: #c62828; } /style wired-link classred-link href/more.html红色的手绘链接/wired-link从 src/wired-base.ts 的BaseCSS可以看到所有 wired 组件的 SVG path 默认stroke: currentColor、stroke-width: 0.7而 wired-link 在 src/wired-link.ts 的组件级样式中覆盖了 path 的描边色为stroke: var(--wired-link-decoration-color, blue)并将stroke-opacity设为0.45——这就是下划线呈半透明蓝色的来源。值得一提的无障碍细节源码还为聚焦态单独设置了样式a:focus path { stroke-opacity: 1; }即键盘 Tab 聚焦到链接时下划线会从不透明度 0.45 提升到 1形成清晰的焦点指示。六、实现原理手绘下划线从何而来wired-link 的手绘效果完全建立在Rough.js手绘风格图形库与 lit 的渲染管线之上其核心流程在 src/wired-link.ts 中只有两个方法逻辑非常精巧。1. 渲染模板真实a SVG 覆盖层render(): TemplateResult { return html a href${this.href} target${this.target || } slot/slot div idoverlaysvg/svg/div /a ; }组件内部渲染一个真实的a元素以保留语义与原生跳转行为文字内容通过slot投射下划线则绘制在一个覆盖层div idoverlay内的空svg上。BaseCSSsrc/wired-base.ts规定#overlay为绝对定位、铺满宿主、pointer-events: none因此手绘 SVG 不会拦截鼠标事件链接点击照常生效。同时a的样式被显式重置为text-decoration: none; border: none;确保浏览器默认下划线被完全移除只保留手绘覆盖层。2. 画布尺寸elevation 参与高度计算canvasSize()负责计算 SVG 画布大小protected canvasSize(): Point { if (this.anchor) { const size this.anchor.getBoundingClientRect(); const elev Math.min(Math.max(1, this.elevation), 5); const w size.width; const h size.height ((elev - 1) * 2); return [w, h]; } return this.lastSize; }画布宽度等于链接文字的实际渲染宽度高度则在文字高度基础上额外增加(elevation - 1) * 2像素为多层下划线预留纵向空间。这里的this.anchor是通过query(a)获取的内部锚点元素。3. 绘制逐层叠加手绘线段draw()是手绘效果的关键protected draw(svg: SVGSVGElement, size: Point) { const elev Math.min(Math.max(1, this.elevation), 5); const s { width: size[0], height: size[1] - ((elev - 1) * 2) }; for (let i 0; i elev; i) { line(svg, 0, s.height (i * 2) - 2, s.width, s.height (i * 2) - 2, this.seed); line(svg, 0, s.height (i * 2) - 2, s.width, s.height (i * 2) - 2, this.seed); } }要点有三循环绘制elevation是多少就在链接底部水平位置循环画多少条线段每条线段纵向间距 2pxelevation越大下划线越“粗”双重绘制同一位置的线段被调用line()两次配合 Rough.js 的随机抖动两条近似但略有偏差的线段叠加出更明显的“手绘复笔”质感种子随机this.seed来自WiredBase构造时的Math.floor(Math.random() * 2 ** 31)见 src/wired-base.ts使每次渲染的抖动笔迹都不同这正是手绘随机感的来源。line()函数定义于 src/wired-lib.ts 的 L100-L102内部调用 Rough.js 的roughLine生成带随机偏移的 OpSet再转换为 SVGpath节点插入覆盖层。当宿主尺寸变化如窗口缩放、文字换行时WiredBase.updated()会触发wiredRender()重绘先比较新旧尺寸变化时才清空 SVG 子节点并重新draw()避免无谓的重绘开销。4. 焦点管理WiredLink重写了focus()方法将焦点委托给内部a锚点focus() { if (this.anchor) { this.anchor.focus(); } else { super.focus(); } }这保证了原生键盘导航Tab 键聚焦与无障碍辅助技术能够像对待普通链接一样对待 wired-link聚焦后下划线不透明度提升的样式正是为此设计的。七、注意事项与最佳实践属性取值elevation会被钳制到 15传入其他数值虽不会报错但超出部分不会生效推荐直接使用合法区间值。必须提供可见内容slot是空的话链接没有可点击区域务必在标签内书写文字或嵌入其他可渲染内容。颜色对比度默认下划线为半透明蓝色stroke-opacity: 0.45在浅色背景上若观感过淡可通过--wired-link-decoration-color加深颜色。配合其他 wired 组件wired-link 与wired-button、wired-card等组件视觉风格统一适合整体采用手绘风格的原型或趣味性页面参考 examples/link.html 的联动示例。安装方式与版本仓库当前版本为3.0.0-rc.7预发布版本如线上环境建议关注正式版本发布情况模块使用 ESM 格式旧式浏览器需配合构建工具或原生 ESM 支持。八、许可证wired-link 随 wired-elements 整体以 MIT License 开源版权所有者为 Preet Shihn。可在仓库根目录的 LICENSE 文件中查看完整的许可条款。参考文件索引官方文档docs/wired-link.md组件实现src/wired-link.ts基类与渲染管线src/wired-base.ts手绘线条工具src/wired-lib.ts使用示例examples/link.html聚合导出src/wired-elements.ts包配置package.json赞分享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点击查看免费下载相关推荐PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器 PlantUML4IDEA是一款专为IntelliJ IDEA平台打开发工具IDE使用rough-stuff/wired-elements实现手绘风格进度环组件教程使用rough stuff/wired elements实现手绘风格进度环组件教程 还在为单调的进度指示器而烦恼想要为你的Web应用添加独特的手绘风格视觉效果UI组件前端MiniMax-H3-Realism-People-LoRA训练幕后176个精选视频片段如何塑造逼真人物MiniMax H3 Realism People LoRA训练幕后176个精选视频片段如何塑造逼真人物 MiniMax H3 Realism People人工智能大模型媒体生成LoRA创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 wired-link 手绘风格链接组件：使用指南与源码实现解析
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-link 是 wired-elements 组件库中一个将原生a锚点/链接包装为手绘hand-drawn风格的 Web Component。它专门用于线框图wireframe原型或追求涂鸦视觉风格的页面让普通超链接的底部下划线变成一条条带有抖动笔触的“手绘”线段。读完本文你将掌握 wired-link 的安装引入方式、elevation/href/target三个核心属性与自定义下划线颜色的完整用法并从源码层面理解其手绘下划线是如何基于 Rough.js 绘制出来的。一、wired-link 是什么wired-elements 是一套“看起来像手绘”的自定义元素集合详见仓库 README.mdwired-link 正是其中的链接组件。与原生a相比它保留了链接的所有语义与交互可点击跳转、支持href与target同时用抖动的 SVG 手绘线段替代浏览器默认的平滑下划线实现 docs/wired-link.md 中所说的 Hand-drawn sketchy Anchor/Link web component。从源码结构看WiredLink类定义于 src/wired-link.ts并作为聚合导出的一部分出现在 src/wired-elements.ts 的export * from ./wired-link中——这意味着你可以从wired-elements总入口一次性引入也可以单独引入该模块。二、安装与引入方式wired-elements 以 npm 包形式发布当前仓库版本为3.0.0-rc.7见 package.json是一个 ESM 模块包type: module依赖 lit 2.x 与 roughjs 4.x。1. 通过 npm 安装npm i wired-elements2. 在 JavaScript/TypeScript 中按模块引入// 方式一从聚合入口引入 import { WiredLink } from wired-elements; // 方式二直接引入单个模块文件 import { WiredLink } from wired-elements/lib/wired-link.js;两种方式等价lib/目录为 TypeScript 源码经编译后的产物outDir: ./lib见 tsconfig.json。引入后wired-link自定义元素即被注册可直接在 HTML 中使用。3. 通过 CDN 直接在 HTML 页面加载script typemodule srchttps://unpkg.com/wired-elements/lib/wired-link.js?module/script对于快速原型或纯静态演示场景这种方式无需任何构建步骤。仓库中的 examples/link.html 即采用此思路本地路径script typemodule src../lib/wired-link.js/script演示了 wired-link 的三种典型用法。三、基础用法引入组件后在 HTML 中直接书写wired-link标签即可wired-link href/more.htmlLearn more/wired-link wired-link elevation3 href/more.html target_blankElevation/wired-link第一行使用默认样式的手绘链接href指向/more.html第二行通过elevation3将下划线加粗到 3 层笔触并通过target_blank让链接在新窗口/新标签页打开。在 examples/link.html 中可以看到更贴近实战的写法——把 wired-link 直接嵌进段落文字流中与wired-button、wired-input等其他组件联动包括target_blank的“新标签页打开”示例。由于组件默认display: inline-block见源码样式表它可以像内联元素一样自然融入文本段落。四、核心属性详解wired-link 共暴露三个公开属性全部在 src/wired-link.ts 中以 lit 装饰器声明属性类型默认值说明elevationNumber1手绘下划线的层数高度取值范围 15含两端hrefString无链接指向的页面 URLtargetString无链接的目标窗口语义同原生a的target1. elevation —— 下划线“高度”文档明确指出其为 15含之间的数字默认 1。从源码实现看该值会被强制收敛到合法区间const elev Math.min(Math.max(1, this.elevation), 5);这段逻辑同时出现在canvasSize()与draw()中意味着即使传入0或100实际生效值也会被钳制到 15。elevation的值决定了手绘下划线由多少条独立线段堆叠而成值越大链接下方的手绘“墨迹”越厚视觉上越醒目。2. href —— 跳转地址即链接的目标 URL最终被渲染到内部a元素的href属性上见下文渲染模板。不设置href时渲染出的a hrefundefined不会发生跳转链接退化为纯视觉元素适合仅用于装饰或占位场景。3. target —— 打开方式语义与原生a的target完全一致常用值如_blank新标签页打开、_self当前页打开。在渲染时未设置或为空字符串时会渲染为target等价于默认的当前页行为。五、自定义样式手绘下划线颜色wired-link 通过两个 CSS 通道控制颜色--wired-link-decoration-color手绘下划线的颜色默认值为blue。这是 wired-link 唯一对外暴露的自定义 CSS 属性Custom CSS Propertycolor链接前景文字颜色。源码样式表中a, a:hover, a:visited { color: inherit; }表明文字颜色继承自宿主上下文因此直接设置组件的color即可改变文字颜色而无需分别处理:hover、:visited等伪类。典型用法style .red-link { --wired-link-decoration-color: #e53935; color: #c62828; } /style wired-link classred-link href/more.html红色的手绘链接/wired-link从 src/wired-base.ts 的BaseCSS可以看到所有 wired 组件的 SVG path 默认stroke: currentColor、stroke-width: 0.7而 wired-link 在 src/wired-link.ts 的组件级样式中覆盖了 path 的描边色为stroke: var(--wired-link-decoration-color, blue)并将stroke-opacity设为0.45——这就是下划线呈半透明蓝色的来源。值得一提的无障碍细节源码还为聚焦态单独设置了样式a:focus path { stroke-opacity: 1; }即键盘 Tab 聚焦到链接时下划线会从不透明度 0.45 提升到 1形成清晰的焦点指示。六、实现原理手绘下划线从何而来wired-link 的手绘效果完全建立在Rough.js手绘风格图形库与 lit 的渲染管线之上其核心流程在 src/wired-link.ts 中只有两个方法逻辑非常精巧。1. 渲染模板真实a SVG 覆盖层render(): TemplateResult { return html a href${this.href} target${this.target || } slot/slot div idoverlaysvg/svg/div /a ; }组件内部渲染一个真实的a元素以保留语义与原生跳转行为文字内容通过slot投射下划线则绘制在一个覆盖层div idoverlay内的空svg上。BaseCSSsrc/wired-base.ts规定#overlay为绝对定位、铺满宿主、pointer-events: none因此手绘 SVG 不会拦截鼠标事件链接点击照常生效。同时a的样式被显式重置为text-decoration: none; border: none;确保浏览器默认下划线被完全移除只保留手绘覆盖层。2. 画布尺寸elevation 参与高度计算canvasSize()负责计算 SVG 画布大小protected canvasSize(): Point { if (this.anchor) { const size this.anchor.getBoundingClientRect(); const elev Math.min(Math.max(1, this.elevation), 5); const w size.width; const h size.height ((elev - 1) * 2); return [w, h]; } return this.lastSize; }画布宽度等于链接文字的实际渲染宽度高度则在文字高度基础上额外增加(elevation - 1) * 2像素为多层下划线预留纵向空间。这里的this.anchor是通过query(a)获取的内部锚点元素。3. 绘制逐层叠加手绘线段draw()是手绘效果的关键protected draw(svg: SVGSVGElement, size: Point) { const elev Math.min(Math.max(1, this.elevation), 5); const s { width: size[0], height: size[1] - ((elev - 1) * 2) }; for (let i 0; i elev; i) { line(svg, 0, s.height (i * 2) - 2, s.width, s.height (i * 2) - 2, this.seed); line(svg, 0, s.height (i * 2) - 2, s.width, s.height (i * 2) - 2, this.seed); } }要点有三循环绘制elevation是多少就在链接底部水平位置循环画多少条线段每条线段纵向间距 2pxelevation越大下划线越“粗”双重绘制同一位置的线段被调用line()两次配合 Rough.js 的随机抖动两条近似但略有偏差的线段叠加出更明显的“手绘复笔”质感种子随机this.seed来自WiredBase构造时的Math.floor(Math.random() * 2 ** 31)见 src/wired-base.ts使每次渲染的抖动笔迹都不同这正是手绘随机感的来源。line()函数定义于 src/wired-lib.ts 的 L100-L102内部调用 Rough.js 的roughLine生成带随机偏移的 OpSet再转换为 SVGpath节点插入覆盖层。当宿主尺寸变化如窗口缩放、文字换行时WiredBase.updated()会触发wiredRender()重绘先比较新旧尺寸变化时才清空 SVG 子节点并重新draw()避免无谓的重绘开销。4. 焦点管理WiredLink重写了focus()方法将焦点委托给内部a锚点focus() { if (this.anchor) { this.anchor.focus(); } else { super.focus(); } }这保证了原生键盘导航Tab 键聚焦与无障碍辅助技术能够像对待普通链接一样对待 wired-link聚焦后下划线不透明度提升的样式正是为此设计的。七、注意事项与最佳实践属性取值elevation会被钳制到 15传入其他数值虽不会报错但超出部分不会生效推荐直接使用合法区间值。必须提供可见内容slot是空的话链接没有可点击区域务必在标签内书写文字或嵌入其他可渲染内容。颜色对比度默认下划线为半透明蓝色stroke-opacity: 0.45在浅色背景上若观感过淡可通过--wired-link-decoration-color加深颜色。配合其他 wired 组件wired-link 与wired-button、wired-card等组件视觉风格统一适合整体采用手绘风格的原型或趣味性页面参考 examples/link.html 的联动示例。安装方式与版本仓库当前版本为3.0.0-rc.7预发布版本如线上环境建议关注正式版本发布情况模块使用 ESM 格式旧式浏览器需配合构建工具或原生 ESM 支持。八、许可证wired-link 随 wired-elements 整体以 MIT License 开源版权所有者为 Preet Shihn。可在仓库根目录的 LICENSE 文件中查看完整的许可条款。参考文件索引官方文档docs/wired-link.md组件实现src/wired-link.ts基类与渲染管线src/wired-base.ts手绘线条工具src/wired-lib.ts使用示例examples/link.html聚合导出src/wired-elements.ts包配置package.json赞分享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点击查看免费下载相关推荐PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器 PlantUML4IDEA是一款专为IntelliJ IDEA平台打开发工具IDE使用rough-stuff/wired-elements实现手绘风格进度环组件教程使用rough stuff/wired elements实现手绘风格进度环组件教程 还在为单调的进度指示器而烦恼想要为你的Web应用添加独特的手绘风格视觉效果UI组件前端MiniMax-H3-Realism-People-LoRA训练幕后176个精选视频片段如何塑造逼真人物MiniMax H3 Realism People LoRA训练幕后176个精选视频片段如何塑造逼真人物 MiniMax H3 Realism People人工智能大模型媒体生成LoRA创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考