前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本篇技术指南围绕 rsuite 的 Button 按钮组件展开覆盖外观appearance、尺寸size、颜色color、图标、块级布局、禁用/激活/加载与可切换状态等全部核心用法并结合 Button 组件源码 与 样式变量定义 深入剖析其状态渲染、受控切换与类名体系帮助你在项目中快速、规范地使用 rsuite 按钮并理解其底层实现机制。获取组件Button是 rsuite 中最基础的组件元素可以快速创建一个带样式的按钮。安装后通过如下方式引入import { Button } from rsuite; const App () ButtonDefault/Button; ReactDOM.render(App /, document.getElementById(root));完整的中文文档见 Button 按钮。外观appearance 属性appearance属性设置按钮样式默认值为default选项包括default、primary、link、subtle、ghost。其 TypeScript 定义见 appearance 类型说明为type Appearance default | primary | link | subtle | ghost;五种外观的完整示例import { Button, ButtonToolbar } from rsuite; const App () ( ButtonToolbar Button appearancedefaultDefault/Button Button appearanceprimaryPrimary/Button Button appearancelinkLink/Button Button appearancesubtleSubtle/Button Button appearanceghostGhost/Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));对应演示文件为 appearance.md。按钮尺寸size 属性size属性设置按钮尺寸默认值为md选项包括lg、md、sm、xsimport { Button, ButtonToolbar } from rsuite; const App () ( ButtonToolbar Button sizelgLarge/Button Button sizemdMedium/Button Button sizesmSmall/Button Button sizexsXsmall/Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));对应演示文件为 size.md。从源码结构看尺寸并非简单的类名切换而是由 CSS 变量驱动的Button.tsx 在根元素上写入data-size{size}属性index.scss 根据该属性应用不同的 CSS 变量组合。_variables.scss 中定义了各档位的实际尺寸尺寸高度--rs-btn-size图标尺寸--rs-btn-icon-sizexs1.5rem24px0.75rem12pxsm1.875rem30px1rem16pxmd2.25rem36px1rem16pxlg2.625rem42px1.25rem20px同时字号、行高、水平/垂直内边距也随尺寸联动变化因此只需设置一个size值即可整体缩放按钮_mixin.scss 中的button-size-*mixin 正是负责把一整套尺寸变量注入对应状态。彩色按钮color 属性color属性设置按钮配色选项包括red、orange、yellow、green、cyan、blue、violet。其 TypeScript 定义见 color 类型说明为type Color red | orange | yellow | green | cyan | blue | violet;彩色按钮通常需要配合appearance使用官方演示中分别展示了primary、subtle、ghost三种外观下的七色按钮color.mdimport { Button, ButtonToolbar } from rsuite; const App () ( ButtonToolbar Button colorred appearanceprimaryRed/Button Button colororange appearanceprimaryOrange/Button Button coloryellow appearanceprimaryYellow/Button Button colorgreen appearanceprimaryGreen/Button Button colorcyan appearanceprimaryCyan/Button Button colorblue appearanceprimaryBlue/Button Button colorviolet appearanceprimaryViolet/Button /ButtonToolbar ButtonToolbar Button colorred appearancesubtleRed/Button {/* ... orange / yellow / green / cyan / blue / violet 同理 ... */} /ButtonToolbar ButtonToolbar style{{ background: #000, padding: 10 }} Button colorred appearanceghostRed/Button {/* ... 其余颜色同理ghost 建议放在深色背景上 ... */} /ButtonToolbar / ); ReactDOM.render(App /, document.getElementById(root));在实现层面color会以data-color{color}的形式落到 DOM 上Button.tsxSCSS 层据此为不同颜色、不同外观组合生成对应的前景色/背景色变量这也是为什么ghost外观适合放在深色背景演示中即包裹在黑色背景的ButtonToolbar内的原因。图标startIcon 与 endIcon通过startIcon在文字之前、endIcon在文字之后放置图标图标可以是rsuite/icons或第三方图标库的组件图标在文字之前with-icon-before.mdimport { Button, ButtonToolbar } from rsuite; import AddOutlineIcon from rsuite/icons/AddOutline; import GearIcon from rsuite/icons/Gear; const App () ( ButtonToolbar Button startIcon{AddOutlineIcon /} Add /Button Button startIcon{GearIcon /} Settings /Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));图标在文字之后with-icon-after.mdimport { Button, ButtonToolbar } from rsuite; import { FaExternalLinkSquareAlt } from react-icons/fa; import PageEndIcon from rsuite/icons/PageEnd; const App () ( ButtonToolbar Button endIcon{FaExternalLinkSquareAlt /} Open on new tab /Button Button endIcon{PageEndIcon /} Next page /Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));从源码看Button.tsx图标会被包裹在span classrs-btn-start-icon/span classrs-btn-end-icon中图标与文字间距由--rs-btn-icon-gap默认 5px控制图标大小则跟随前面提到的--rs-btn-icon-size变量自动适配size。适应容器宽度block 属性block为boolean类型使按钮拉伸为块级、占满父容器宽度block.mdimport { Button, ButtonToolbar } from rsuite; import AddOutlineIcon from rsuite/icons/AddOutline; const App () ( ButtonToolbar Button appearancedefault blockBlock/Button Button appearanceprimary blockBlock Primary/Button Button block startIcon{AddOutlineIcon /}Block With Icon/Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));禁用、激活与加载状态禁用disabled所有外观均可禁用注意即便按钮带有href禁用后也不会响应跳转disabled.mdimport { Button, ButtonToolbar } from rsuite; const App () ( ButtonToolbar Button appearancedefault disabledDefault/Button Button appearanceprimary disabledPrimary/Button Button appearancelink disabled hrefhttps://rsuitejs.comLink/Button Button appearancesubtle disabledSubtle/Button Button appearanceghost disabledGhost/Button /ButtonToolbar ); ReactDOM.render(App /, document.getElementById(root));激活active表示按钮处于当前选中态静态声明active即可active.mdButton appearanceprimary activePrimary/Button加载中loading按钮内会渲染加载指示器loading.md。从源码看Button.tsxloading为true时会渲染一个span classrs-btn-spin其直径由--rs-btn-loading-spin-default-diameter18pxxs 尺寸为 16px等变量控制见 _variables.scss。以上状态均以data-*属性形式写入 DOMdata-active、data-disabled、data-loadingButton.tsx_mixin.scss 中的button-activated、button-pressed、button-disabled等 mixin 再基于这些属性选择器应用对应样式使样式与状态一一对应、便于主题覆盖。可切换按钮toggleable 与 onToggletoggleable6.0.0 引入让按钮可以在激活与非激活状态之间切换点击时触发onToggle回调toggleable.mdimport { Button, ButtonGroup } from rsuite; const App () ( ButtonGroup Button toggleableBold/Button Button toggleableItalic/Button Button toggleableUnderline/Button /ButtonGroup ); ReactDOM.render(App /, document.getElementById(root));底层实现上active状态由 useControlled 钩子管理因此它既支持非受控用法组件内部自行翻转状态也支持受控用法传入active后由外部接管状态。点击逻辑见 handleClick当toggleable为真时计算nextActive !active先更新内部状态再回调onToggle?.(nextActive, event)最后始终执行用户传入的onClick。需要留意的是源码中onToggle的签名为(active: boolean, event: React.MouseEvent) voidButton.tsx即状态值在前、事件在后编写回调时请以该顺序为准。此外toggleable按钮常配合 ButtonGroup 使用。从源码结构看Button会读取ButtonGroupContextButton.tsx当自身未显式指定时disabled与size会从父级ButtonGroup继承第 73、77 行这是“工具栏统一控制按钮尺寸/禁用”的实现来源。Props 完整参考Button属性名称类型(默认值)描述版本activeboolean激活状态appearanceAppearance(default)设置外观asElementType(button)为组件自定义元素类型blockboolean显示为块级元素childrenReactNode组件的内容classPrefixstring(btn)组件 CSS 类的前缀colorColor设置颜色disabledboolean禁用endIconReactNode在按钮文字之后显示一个图标hrefstring按钮跳转链接loadingboolean按钮可以显示加载指示器onToggle(active: boolean, event: React.MouseEvent) void切换状态时的回调6.0.0sizelg \| md \| sm \| xs(md)设置按钮尺寸startIconReactNode在按钮文字之前显示一个图标toggleableboolean可切换状态6.0.0其中Appearance与Color类型定义见上文onToggle的形参顺序以 Button.tsx 的类型声明为准。源码级实现要点渲染元素切换as属性默认button当传入href时自动切换为SafeAnchor安全地渲染a元素Button.tsx。若自定义as为其他元素类型组件会自动补上rolebutton以维持正确的 ARIA 语义第 124 行。禁用属性的差异处理对可原生禁用的元素如button使用disabled属性否则降级为aria-disabledButton.tsx。type 默认值未显式指定type且渲染为button时默认注入typebutton避免在表单中被误当作提交按钮第 123 行。涟漪效果ripple默认为true但link与ghost外观不渲染 Ripple 元素Button.tsx与这两种外观“去边框/透明化”的轻量风格保持一致。样式类前缀classPrefix默认btn配合useStyles生成rs-btn等类名useCustom钩子则支持通过CustomProvider全局定制组件默认属性Button.tsx。状态与测试完整的 Props 定义与默认值在 Button.tsx 中可查证行为与样式断言分别位于 Button.spec.tsx 和 Button.styles.spec.tsx。可访问性ARIA 属性Button 具有button的角色。当通过as自定义渲染元素时源码会自动补上rolebuttonButton.tsx。键盘交互当 Button 获得焦点时Space或Enter可以激活它。由于默认渲染为原生button该行为由浏览器原生支持with-focus-ringmixinindex.scss同时保证了可见的焦点环。相关参考中文文档主入口docs/pages/components/button/zh-CN/index.md组件源码src/Button/Button.tsx组件导出src/Button/index.tsx样式实现src/Button/styles/index.scss、src/Button/styles/_variables.scss、src/Button/styles/_mixin.scss各场景演示片段docs/pages/components/button/fragments配套组件ButtonGroup、ButtonToolbar、IconButton赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐RSuite Button 组件完全指南外观、尺寸、颜色、图标与加载状态RSuite Button 组件完全指南外观、尺寸、颜色、图标与加载状态 RSuite 的 Button 是整套组件库中最基础的操作元素也是表单提交、工具栏前端UI组件RSuite Button 彩色按钮详解color 属性与 primary、subtle、ghost 外观的源码级实现RSuite Button 彩色按钮详解color 属性与 primary、subtle、ghost 外观的源码级实现 RSuite 的 Button 组件通前端UI组件rsuite Button 外观样式实战appearance 五值组合、CSS 变量机制与源码解析rsuite Button 外观样式实战appearance 五值组合、CSS 变量机制与源码解析 本篇围绕 rsuite 组件库中 Button 组件的 a前端UI组件上一篇JAX 有状态计算深度指南纯函数线程化状态与可变数组 Refs下一篇终极指南如何使用 sebastian/diff 打造专业差异输出展示层创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
