SuperAPI AI 工具集

sgds-components-radio

通用与其它

查看项目

更新于 10-15 21:54

技能介绍

用途:在页面中展示一组互斥的单选按钮,并提供分组标签、提示文字与校验反馈。

主要能力:sgds-radio-group 作为容器包裹多个 sgds-radio,保证互斥选择;通过 group 的 value 属性预选某一项;通过 name 属性统一表单字段名并传递给子项;label 与 hintText 提供标题与提示;required、hasFeedback、invalidFeedback、invalid 用于必填与校验反馈;单个 sgds-radio 可设置 value、checked、disabled、invalid。事件方面,选择变化时在 group 上触发 sgds-change,detail 为 { value: string };单选项上还有 sgds-focus 与 sgds-blur。插槽:group 的默认插槽放 sgds-radio,radio 的默认插槽放标签文本。

使用方式:先参照 sgds-components-setup 完成安装与框架集成(React 19+ 与 React 18 及以下、Vue、Angular 的差异见该文档)。基本写法为在 sgds-radio-group 上设置 name、label、hintText,内部放置若干 sgds-radio,通过 value 属性区分取值。要预选可给 group 设 value 匹配某个 radio 的 value;要监听选择结果,对 group 添加事件监听,例如 document.getElementById("my-radios").addEventListener("sgds-change", e => { console.log("Selected:", e.detail.value); })。

限制:独立使用 sgds-radio 不受支持,必须包裹在 sgds-radio-group 中;name 应设在 group 上;sgds-change 监听应加在 group 而非单个 radio;hasFeedback 与 invalidFeedback 也设在 group 上。该组件不暴露自定义属性与 CSS part,不提供 CSS 样式修改能力。资料未提供定价、平台支持范围与其他附加功能说明。