前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载RadioTile 是 rsuite 中一类行为与 Radio 相同的可选卡片组件适用于在设置页、权限选择、项目创建等需要从若干带图标、标题与描述的大块选项里选一个的场景。本文围绕 basic.md 中的项目可见性Visibility Level示例展开完整讲解RadioTile与RadioTileGroup的用法、Props、受控/非受控模式、禁用与内联布局并结合 RadioTile.tsx、RadioTileGroup.tsx 及对应测试用例与样式源码说明其底层实现与无障碍细节让你既能照抄示例快速落地也能深入理解其工作机制。一、核心概念让选项变成可点击的大卡片RadioTile卡片式单选与普通 Radio 的核心区别在于视觉形态它以整块可点击的卡片承载选项卡片内通常包含图标、标题与补充说明文字。官方文档将其定义为A series of selectable tile components that behave like Radio一系列行为如同 Radio 的可选瓦片组件从源码注释看该组件于5.35.0 版本引入见 RadioTile.tsx。RadioTile必须与RadioTileGroup配合使用RadioTileGroup负责管理整个组的选中状态通过 React Context 向下分发value、name、disabled与onChangeRadioTile则从 Context 中读取这些信息并渲染单个卡片。两者在仓库中分别导出入口见 RadioTile/index.tsx 与 RadioTileGroup/index.tsx。二、基本用法项目可见性选择示例原文档 basic.md 提供了一个非常典型的GitLab 风格项目可见性Visibility Level选择器Private / Internal / Public 三个选项每个选项带一个 VS Code 风格图标、一个加粗标题和一段说明文字RadioTileGroup通过defaultValueprivate默认选中 Privateimport { RadioTile, RadioTileGroup } from rsuite; import { Icon } from rsuite/icons; import { VscLock, VscWorkspaceTrusted, VscRepo } from react-icons/vsc; const App () ( RadioTileGroup defaultValueprivate aria-labelVisibility Level RadioTile icon{Icon as{VscLock} /} labelPrivate valueprivate Project access must be granted explicitly to each user. If this project is part of a group, access will be granted to members of the group. /RadioTile RadioTile icon{Icon as{VscWorkspaceTrusted} /} labelInternal valueinternal The project can be accessed by any logged in user except external users. /RadioTile RadioTile icon{Icon as{VscRepo} /} labelPublic valuepublic The project can be accessed without any authentication. /RadioTile /RadioTileGroup ); ReactDOM.render(App /, document.getElementById(root));示例中的三个要素构成了每个卡片式选项的标准结构icon卡片左侧的图标本例通过rsuite/icons的Icon组件包装react-icons/vsc的 VS Code 图标label选项标题渲染为加粗文字样式源码中.rs-radio-tile-label { font-weight: bold; }见 styles/index.scss子节点children选项的补充描述渲染为次要文字颜色.rs-radio-tile-content使用--rs-text-secondary。选中状态的反馈由卡片右上角的对勾标记.rs-radio-tile-mark呈现未选中时该标记opacity: 0完全隐藏data-checkedtrue时显现并显示rsuite/icons/Check图标见 RadioTile.tsx 与样式源码 styles/index.scss。三、RadioTileGroup 的职责状态管理与分组RadioTileGroup是整组选项的状态容器对应源码 RadioTileGroup.tsx内部通过useControlled(valueProp, defaultValue)同时支持**受控value与非受控defaultValue**两种模式见 RadioTileGroup.tsx通过RadioTileContext.Provider向下传递name、disabled、当前value与handleChange见 RadioTileGroup.tsx默认渲染为Stack组件direction由inline决定inline为row、否则为column并设置roleradiogroup、alignItemsstretch、spacing{10}见 RadioTileGroup.tsx。而RadioTile一侧选中状态的计算逻辑在 RadioTile.tsx当组内存在受控/非受控的groupValue时卡片是否选中取决于groupValue value组内没有值时则回退使用自身的checked/defaultChecked。点击卡片时handleChange会同时调用组级的onGroupChange?.(value, event)与自身onChange?.(value, event)即组回调与卡片回调都会触发。这一行为有测试用例背书RadioTileGroup.spec.tsx 验证了点击单个RadioTile时卡片自身的onChange与组的onChange各被调用一次同文件 RadioTileGroup.spec.tsx 则分别验证了value{1}与defaultValue{1}两种方式都能让值为1的卡片被选中getByRole(radio, { checked: true })。四、Props 全解卡片与分组的配置参数RadioTileProps根据 RadioTile.tsx 的接口定义与 en-US/index.md 的 Props 表格属性类型说明checkedboolean指定该卡片是否被选中受控defaultCheckedboolean指定初始选中状态非受控disabledboolean是否禁用该卡片未显式设置时继承组的disabledlabelReactNode卡片标题iconReactNode卡片图标namestring表单提交使用的name默认继承组的namevaluestring \| number卡片值用于与RadioTileGroup的value比较以决定选中onChange(value, event) void选中状态变化时的回调参数为卡片value与原生 ChangeEventchildrenReactNode卡片补充描述as/tabIndex等—底层基于Box组件as默认渲染为labeltabIndex默认0值得注意的实现细节卡片内部实际渲染了一个typeradio的原生input但通过样式将其视觉隐藏opacity: 0; width: 0; height: 0见 styles/index.scss整张卡片由label包裹实现点击联动。测试用例 RadioTile.spec.tsx 验证了渲染出的 radio、label文案的样式类、icon样式类、disabled属性以及checked/defaultChecked/value的透传行为。RadioTileGroupProps属性类型说明defaultValuestring \| number默认选中的值非受控模式valuestring \| number当前选中的值受控模式onChange(value, event) void值变化时的回调inlineboolean是否内联布局横向排列默认纵向排列disabledboolean禁用整组所有卡片namestring表单name会下发给组内所有卡片childrenReactNode组内RadioTile集合RadioTileGroup还继承了FormControlBaseProps见 RadioTileGroup.tsx可与 rsuite 的Form/FormControl体系集成实现表单校验与受控取值。五、进阶用法禁用与内联布局禁用状态禁用分为单卡片禁用与整组禁用两种粒度在单个RadioTile上加disabled仅该卡片不可选在RadioTileGroup上加disabled组内所有卡片统一禁用。整组禁用的传播机制在 RadioTileGroup.tsx 的 Context 中下发disabled而 RadioTile.tsx 以disabled disabledContext作为默认值接收。禁用时样式会变为灰色文本、禁用光标选中态使用专门的--rs-radio-tile-checked-disabled-color边框与标记颜色见 styles/index.scss。测试 RadioTileGroup.spec.tsx 验证了组禁用后所有 radio 均带有disabled属性。官方还提供了整组全部禁用的示例 disabled.md写法即给每个卡片都加上disabledRadioTileGroup defaultValueprivate aria-labelVisibility Level RadioTile icon{Icon as{VscLock} /} labelPrivate valueprivate disabled Project access must be granted explicitly to each user... /RadioTile RadioTile icon{Icon as{VscWorkspaceTrusted} /} labelInternal valueinternal disabled The project can be accessed by any logged in user except external users. /RadioTile RadioTile icon{Icon as{VscRepo} /} labelPublic valuepublic disabled The project can be accessed without any authentication. /RadioTile /RadioTileGroup内联布局inline默认RadioTileGroup是纵向column排列适合选项较多、描述较长的场景传入inline后变为横向row排列。官方示例 inline.md 展示了新建项目场景下通过useMediaQuery(xl)实现响应式布局——屏幕宽度达到xlmin-width: 1200px时自动切换为横排import { RadioTile, RadioTileGroup, useMediaQuery } from rsuite; const App () { const [isInline] useMediaQuery(xl); // (min-width: 1200px) return ( RadioTileGroup defaultValueblank inline{isInline} aria-labelCreate new project RadioTile icon{Icon as{VscFile} /} labelCreate blank project valueblank Create a blank project to house your files... /RadioTile RadioTile icon{Icon as{VscNotebookTemplate} /} labelCreate from template valuetemplate Create a project pre-populated with the necessary files... /RadioTile RadioTile icon{Icon as{VscRepoClone} /} labelImport project valueimport Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab. /RadioTile /RadioTileGroup ); };inline的实现非常轻量direction{inline ? row : column}直接映射到 Stack 的 flex-direction见 RadioTileGroup.tsx。测试 RadioTileGroup.spec.tsx 通过断言flex-direction: row验证了内联布局生效。六、无障碍Accessibility与表单细节官方文档en-US/index.md 的 Accessibility 一节明确组容器设置roleradiogroup选中的RadioTile其原生 input 的aria-checked为true否则为false实现遵循 WAI-ARIA Radio Button 实践模式。从源码看无障碍细节在 RadioTile.tsx 中有更完整的落地原生input typeradio以useUniqueId(radio-)生成唯一 id通过aria-labelledby关联标题、aria-describedby关联描述文本并同步aria-checked与aria-disabled配合隐藏 input 的样式styles/index.scss既保证视觉上是整卡可点又保留键盘焦点与读屏语义。表单集成方面RadioTileGroup通过name将同名 input 组成同一单选组默认RadioTile.name继承组name配合原生value可正常参与表单提交同时继承FormControlBaseProps在 rsuiteForm中可作为受控字段使用。测试 RadioTileGroup.spec.tsx 验证了组内所有 radio 的name属性一致。七、常见问题与最佳实践何时用 RadioTile 而非 Radio当选项需要同时表达图标 标题 较长描述时卡片形态明显优于紧凑的 Radio若只是简单的短选项列表传统 Radio 更轻量。受控还是非受控单页静态选择可用defaultValue若需要外部同步状态、配合表单校验或重置逻辑请使用valueonChange的受控模式此时value由外部管理选中的判定完全依赖value 卡片value。响应式排列结合useMediaQuery与inline属性可在宽屏横排、窄屏纵排之间平滑切换参考 inline.md 的做法。分组禁用希望整组不可用时直接在RadioTileGroup上加disabled无需逐个卡片设置。图标加载示例使用rsuite/icons的Icon组件配合react-icons/vsc实际项目中可替换为任意ReactNode如 SVG、自定义图标组件只要是可渲染节点即可作为icon传入。八、源码阅读指引若想深入理解组件实现建议按以下顺序阅读仓库对应文件组件主体RadioTile.tsx选中逻辑、Context 消费、无障碍属性、RadioTileGroup.tsx受控状态、Context 生产、布局样式实现styles/index.scss卡片边框、对勾标记、禁用态配色均基于 rsuite CSS 变量测试用例RadioTile.spec.tsx、RadioTileGroup.spec.tsx覆盖选中、禁用、name、回调、内联布局等核心行为组件文档en-US/index.md完整 Props 表格与无障碍说明。综上RadioTileRadioTileGroup是一对视觉丰富、语义完整、代码简洁的单选解决方案以原生 radio 语义为基础通过卡片化视觉与 Context 状态管理让权限选择、项目创建、偏好设置等大选项场景既美观又易维护。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Diesel关联实战教程用belonging_to轻松实现用户-文章一对多与多对多关系Diesel关联实战教程用belonging_to轻松实现用户 文章一对多与多对多关系 Diesel 是 Rust 生态中最流行的安全、可扩展的 ORM 与查前端UI组件rsuite Card 卡片组件完全指南从基础用法到源码级原理rsuite Card 卡片组件完全指南从基础用法到源码级原理 本文以 rsuite 开源仓库中的 Card卡片组件文档 docs/pages/compo前端UI组件rsuite RadioTile 磁贴单选组件API 全解析与源码级实现原理rsuite RadioTile 磁贴单选组件API 全解析与源码级实现原理 RadioTile 是 rsuite 中一类“磁贴式”单选组件它以整块卡片作为前端UI组件上一篇uBlockOrigin-HUGE-AI-Blocklist规则覆盖率分析哪些AI内容平台仍在漏网下一篇Halo 后端 application/ 模块开发指南WebFlux R2DBC 响应式架构、工程结构与开发规范创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考