wired-elements 之 wired-radio-group：手绘风格单选组组件完整使用与源码解析-北京尧图网络

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-radio-group是 wired-elements 组件库中负责单选语义的容器组件它把一组wired-radio组合起来保证用户至多选中一个并通过selected属性对外暴露当前选中项。本指南以 docs/wired-radio-group.md 为骨架结合 wired-radio-group.ts 等源码实现讲解安装引入、HTML 用法、属性与事件、键盘导航、无障碍支持与自定义样式读完后你可以在线框原型或趣味项目中直接落地使用并能理解其单选约束与事件同步的底层原理。组件定位手绘风格的单选容器在 wired-elements一套外观为手绘草稿风格的 Web Components可参考 README.md中单选功能被拆成两层wired-radio单个手绘风格单选按钮圆形轮廓选中时内部实心圆点负责渲染与交互反馈wired-radio-group单选组容器负责收集组内所有wired-radio、维护最多选一个的约束、同步selected状态并派发事件。两者缺一不可单独使用wired-radio时它只是一个可勾选的按钮只有放进wired-radio-group才会获得真正的单选组行为。这正对应原文档第一句对它的定义Allows user to select at most one radio button from a set. Works withwired-radio.安装与引入wired-radio-group属于wired-elements包的一部分仓库根目录的 package.json 中声明包名为wired-elements当前版本为3.0.0-rc.7。在你的 JavaScript 项目中安装npm i wired-elements然后在模块代码中引入原文档提供了两种方式import { WiredRadioGroup, WiredRadio } from wired-elements; // 或按需引入单个模块文件 import { WiredRadioGroup } from wired-elements/lib/wired-radio-group.js;第一种方式从包主入口导入全部组件第二种按需加载lib/wired-radio-group.js可减小打包体积。两种导入后wired-radio-group标签都会作为自定义元素在页面中可用customElement(wired-radio-group)由 wired-radio-group.ts 中的装饰器注册。按同样方式引入wired-radio后即可组合使用。基本用法HTML 中的单选组原文档给出的核心示例即是最小可用形态——在wired-radio-group内部放置多个带name的wired-radio并通过selected指定默认选中项wired-radio-group selectedtwo wired-radio nameoneOne/wired-radio wired-radio nametwoTwo/wired-radio wired-radio namethreeThree/wired-radio wired-radio namefourFour/wired-radio /wired-radio-group几个关键点name是匹配标识组内每个wired-radio的name字符串是它在该组中的唯一标识selected属性与之对应匹配。源码 wired-radio-group.ts 的updated()中会遍历插槽slot内的子节点凡是tagName WIRED-RADIO的元素都收集进radioNodes数组并据此设置各 radio 的checked状态。selected决定默认选中项上例中selectedtwo表示名为two的单选按钮初始处于选中状态未指定selected时组内所有 radio 初始均未选中。任意 HTML 文本作为标签wired-radio内的文本One、Two…通过其内部slot/slot渲染为标签文字详见 wired-radio.ts 的render()方法。仓库中的 examples/radio.html 给出了一个可直接运行的完整页面先展示单个 radio 的三种形态普通、checked、disabled、自定义样式再展示一个selectedtwo的四选项单选组适合对照验证。属性Properties原文档声明wired-radio-group只有一个对外属性属性类型说明selectedString当前选中的单选按钮名称name源码中的定义与细节如下wired-radio-group.tsproperty({ type: String }) selected?: string;类型为string可选值为组内某个wired-radio的name。它是双向同步的入口一方面初始化时updated()会读取selected把name selected的 radio 置为checked true其余置为false另一方面用户点击切换后源码会把新选中的 name 写回selected并派发selected事件。因此你可以用group.selected读取当前值也可以外部设置该属性来程序化改变选中项。当前选中项被取消勾选时源码handleChecked中if (!checked)分支会立即把该项重新置回checked true从机制上保证单选组内永远有一个或零个被勾选项、不可能出现组内空白这解释了单选语义的强制约束。事件Events原文档声明selected事件在用户更改选择时触发。结合源码fireSelected()方法private fireSelected() { fireEvent(this, selected, { selected: this.selected }); }可以得到准确的事件规格事件名触发时机事件详情detailselected用户切换选择选中一个新项或用键盘导航改变选中项{ selected: string }即新选中项的 name事件通过 wired-base.ts 中的fireEvent派发new CustomEvent(name, { composed: true, bubbles: true, detail })因此它会冒泡且可跨 Shadow DOM 边界composed: true你可以方便地在页面任意祖先节点上监听适合做统一的表单变更收集。监听示例const group document.querySelector(wired-radio-group); group.addEventListener(selected, (e) { console.log(当前选中:, e.detail.selected); });需要区分的是组容器对外派发的是selected事件而单个wired-radio在自身勾选状态变化时派发的是change事件携带{ checked: boolean }。组内通过事件委托统一监听子 radio 的change见connectedCallback中this.addEventListener(change, this.checkListener)再加工成selected事件对外发布。wired-radio的属性与事件细节可参考 docs/wired-radio.md 及其源码 wired-radio.ts。源码级原理单选约束与状态同步把 wired-radio-group.ts 的关键调用链拆开看单选组的行为由三部分协作完成子项收集render()渲染一个slot idslot slotchange${this.slotChange}updated()每次更新时调用slot.assignedNodes()获取插槽子节点过滤出WIRED-RADIO元素存入radioNodes并同步各 radio 的checked。由于slotchange会触发requestUpdate()动态增删 radio 时状态会自动重算。点击切换用户点击任意 radio 后该 radio 触发change事件detail 为{ checked }组的handleChecked收到事件若checked为 false试图取消勾选则强制把该项重新设为checked true维持单选不空白若为 true则把selected更新为该 radio 的name并派发selected事件。键盘导航firstUpdated()中为组件注册keydown监听按下左/上方向键调用selectPrevious()右/下方向键调用selectNext()。两者都会在当前选中项基础上向前/后取相邻 radio到边界时循环回绕调用radio.focus()聚焦目标项更新selected并派发事件当前无选中项时则聚焦第一项。这让单选组天生支持纯键盘操作。此外firstUpdated()还做了无障碍相关工作this.setAttribute(role, radiogroup); this.tabIndex (this.getAttribute(tabindex) || 0);即自动为容器设置roleradiogroup语义角色并让容器本身可聚焦tabindex默认 0配合方向键导航符合 ARIA 单选组的交互规范。自定义样式wired-radio-group的样式定义static get styles()暴露了一个可用于调整组内各选项间距的 CSS 自定义属性CSS 变量默认值作用--wired-radio-group-item-padding5px组内每个子项radio的内边距wired-radio-group { --wired-radio-group-item-padding: 10px; }同时单个wired-radio还支持通过--wired-radio-icon-color默认currentColor即继承文字颜色改变圆形图标的描边与填充颜色详见 docs/wired-radio.mdexamples/radio.html中也有.custom { color: blue; --wired-radio-icon-color: red; }的示例组合。组容器的display为inline-blockfont-family: inherit继承页面字体方便融入既有设计。完整可运行示例综合原文档与仓库 examples/radio.html下面是一个可直接保存为 HTML 文件运行的完整示例包含默认选中、事件监听与纯键盘操作!DOCTYPE html html head meta charsetutf-8 script typemodule import wired-elements/lib/wired-radio.js; import wired-elements/lib/wired-radio-group.js; const group document.querySelector(#rg); group.addEventListener(selected, (e) { document.querySelector(#log).textContent 当前选中 e.detail.selected; }); /script /head body wired-radio-group idrg selectedtwo wired-radio nameoneOne/wired-radio wired-radio nametwoTwo/wired-radio wired-radio namethreeThree/wired-radio wired-radio namefourFour/wired-radio /wired-radio-group p idlog当前选中two/p /body /html运行后可见页面初始高亮 Two点击其他选项会立即切换选中项并更新日志将焦点置于组内后按方向键可在四个选项间循环切换含首尾回绕selected事件同步触发。小结wired-radio-group是一个麻雀虽小但交互完整的手绘风格单选容器一个selected字符串属性、一个selected事件配合与wired-radio的name匹配约定即可实现至多选一的单选组底层源码还内置了取消勾选强制回选、方向键循环导航、roleradiogroup无障碍语义与插槽动态同步等细节。无论用于线框原型还是追求趣味外观的正式界面它都能与 wired-elements 其他组件无缝组合。若需要深入了解单个单选按钮的能力checked、disabled、name、change事件与图标颜色变量可继续阅读 docs/wired-radio.md。赞分享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平台打开发工具IDEGitHub_Trending/ma/machine-learning-for-trading中的无监督学习PCA与聚类分析GitHub_Trending/ma/machine learning for trading中的无监督学习PCA与聚类分析在量化交易领域无监督学习技术能示例工程金融科技机器学习人工智能深度学习Wired Elements 手绘风格进度环组件 wired-progress-ring 详解Wired Elements 手绘风格进度环组件 wired progress ring 详解组件概述 Wired Elements 项目中的 wired pUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

wired-elements 之 wired-radio-group：手绘风格单选组组件完整使用与源码解析

相关推荐

深入理解 Service：从系统服务到云原生服务的一站式排查指南

使用RestTemplate进行post与get请求的案例

Origin自定义日期横坐标：从数据导入到刻度控制的完整指南

更多资讯

GLM 5.3 Batch 模式高效应用指南

RM500U固件升级实战指南：从驱动冲突到三重校验刷机

T型、π型、L型滤波电路选型指南：截止频率计算与仿真对比

ACK智算升级：从容器编排到GPU精细化调度与成本优化

理解MISRA C编码规范：从C语言安全到嵌入式功能安全实践

Mosquitto 1.4.2 版本剖析：Broker 与客户端库关键缺陷修复详解

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？