前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读本篇文章以 rsuite 的Stat组件为核心系统讲解如何用「标签 数值 趋势 辅助文本」快速构建专业的数据统计卡片并深入剖析formatOptions本地化数字格式化、Stat.Trend趋势指示器、StatGroup网格布局以及响应式适配等能力。读完本文你将掌握 Stat 全家族Stat、Stat.Label、Stat.Value、Stat.Trend、Stat.ValueUnit、Stat.HelpText、StatGroup的完整 API 用法并能将其灵活运用于仪表盘、运营看板等场景。关联文档Stat 官方文档核心实现位于 src/Stat、src/StatGroup全部演示代码见 docs/pages/components/stat/fragments。组件定位用一句话讲清楚 Stat 是做什么的Stat统计数值用于展示带标题的统计型数据重点突出某个属性的当前值。它的典型视觉形态是一张“小卡片”顶部是Label标签如 “Page Views”中间是大号加粗的Value数值如 “4,394”底部可选HelpText辅助说明如 “Last 7 Days”。从源码结构看Stat是一个复合组件通过Subcomponents挂载了 5 个子组件src/Stat/Stat.tsx#L23-L29const Subcomponents { Label: StatLabel, Value: StatValue, Trend: StatTrend, ValueUnit: StatValueUnit, HelpText: StatHelpText };因此你可以使用Stat.Label、Stat.Value、Stat.Trend、Stat.ValueUnit、Stat.HelpText这种命名空间语法并且所有子组件均通过 src/Stat/index.tsx 统一导出类型定义StatProps、StatLabelProps等也可一并引用。在渲染层面Stat根元素基于 internals/Box 构建默认输出div内部用dl描述列表承载标签与数值dt/dd语义化良好Box as{as} className{classes} ref{ref} {...rest} {icon div className{prefix(icon)}{icon}/div} dl className{prefix(body)}{children}/dl /Box快速上手最小可用示例从 docs/pages/components/stat/fragments/basic.md 可以看到最基础的用法——标签 数值 辅助文本import { Stat } from rsuite; const App () ( Stat Stat.LabelPage Views/Stat.Label Stat.Value4,394/Stat.Value Stat.HelpTextLast 7 Days/Stat.HelpText /Stat ); ReactDOM.render(App /, document.getElementById(root));默认的Stat.Value支持直接以children传入文本如4,394也支持通过value属性传入数字交由组件内部格式化下文详解。Stat.HelpText是纯展示组件源码基于createComponentspan生成src/Stat/StatHelpText.tsx渲染为span。数值本地化格式化formatOptions 深入解析文档中的第二个示例format-options.md展示了Stat.Value的formatOptions属性它用于locale-aware 的数值格式化import { Stat, StatGroup } from rsuite; const App () ( StatGroup spacing{20} Stat Stat.LabelProfits/Stat.Label Stat.Value value{38050} formatOptions{{ style: currency, currency: USD }} / /Stat Stat Stat.LabelSpeed/Stat.Label Stat.Value value{120} formatOptions{{ style: unit, unit: kilometer-per-hour }} / /Stat /StatGroup );formatOptions的类型是标准的Intl.NumberFormatOptions因此你可以在其中使用Intl.NumberFormat的全部选项例如货币{ style: currency, currency: USD }→$38,050.00单位{ style: unit, unit: kilometer-per-hour }→120 km/h千分位/小数位{ minimumFractionDigits: 2, maximumFractionDigits: 2 }百分比{ style: percent }底层原理Stat.Value在接收value后会委托给内部组件FormattedNumber处理src/Stat/StatValue.tsx#L26。而FormattedNumbersrc/internals/intl/FormattedNumber.tsx的核心逻辑是const { code } useCustom(); const formatter useMemo( () new Intl.NumberFormat(code, formatOptions), [code, formatOptions] ); return React.Fragment{formatter.format(value)}/React.Fragment;这里有一个容易被忽略的关键点格式化结果会跟随CustomProvider设置的 locale 而变化。useCustom()取到的code即当前语言代码如en-US、zh-CN组件用useMemo缓存Intl.NumberFormat实例locale 或 formatOptions 变化时才会重建。也就是说同一个value{38050}在中文 locale 下会输出¥38,050.00若 currency 为 CNY在英文 locale 下输出$38,050.00——这正是“本地化数字格式”的含义。注意当value与children同时存在时value格式化结果会渲染在children之前见 src/Stat/StatValue.tsx#L26-L27。趋势指示器Stat.Trend 的三种状态与两种外观Stat.Trend用于在数值旁显示上升/下降/持平趋势是运营看板中最常用的增强组件。示例来自 trend.mdimport { Stat, StatGroup } from rsuite; const App () ( StatGroup Stat Stat.LabelProfits/Stat.Label HStack spacing{10} Stat.Value38,050/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat Stat Stat.LabelRevenue/Stat.Label HStack spacing{10} Stat.Value4,635/Stat.Value Stat.Trend indicatordown5%/Stat.Trend /HStack /Stat Stat Stat.LabelStaff/Stat.Label HStack spacing{10} Stat.Value110/Stat.Value Stat.Trend indicatorequal0%/Stat.Trend /HStack /Stat Stat Stat.LabelCost/Stat.Label HStack spacing{10} Stat.Value2,800/Stat.Value Stat.Trend appearancesubtle10%/Stat.Trend /HStack /Stat Stat Stat.Label Expenses/Stat.Label HStack spacing{10} Stat.Value1,130/Stat.Value Stat.Trend appearancesubtle3%/Stat.Trend /HStack /Stat /StatGroup );API 要点indicatorup | down | equal默认up。它决定渲染哪个箭头图标与配色。appearancedefault | subtle默认default。default带浅色底块padding 2px 6pxsubtle只保留纯色箭头。源码剖析在 src/Stat/StatTrend.tsx 中三个方向的内联 SVG 箭头ArrowUp/ArrowDown/ArrowEqual由组件内置无需额外依赖图标库const IndicatorIcon indicator up ? ArrowUp : indicator down ? ArrowDown : ArrowEqual; return ( Box as{as} ref{ref} className{classes} {...rest} {children} {IndicatorIcon className{prefix(indicator)} /} /Box );CSS 配色定义在 src/Stat/styles/index.scss#L69-L116上升为绿色系--rs-green-900文本 /--rs-green-100底、下降为红色系--rs-red-900/--rs-red-100、持平为品牌主色--rs-primary-900/--rs-primary-100subtle外观则对应使用更浅的 600 级色阶。所有颜色均引用 rsuite 的 CSS 变量体系会随主题切换自动适配。边框强调bordered 属性Stat bordered会为统计卡片添加 1px 边框、圆角、浅色背景与 16px 内边距bordered.mdimport { Stat } from rsuite; const App () ( Stat bordered w{200} Stat.LabelPage Views/Stat.Label Stat.Value4,394/Stat.Value Stat.HelpTextLast 7 Days/Stat.HelpText /Stat );对应样式见 src/Stat/styles/index.scss#L35-L40-bordered { border: 1px solid var(--rs-border-primary); background-color: var(--rs-stat-body-bg); border-radius: var(--rs-stat-border-radius); padding: 16px; }上述w{200}来自Box的布局属性Stat继承BoxProps同理还可使用p、h、bg、flex等 Box 快捷布局属性无需额外包一层 div。与进度类组件组合Progress.Line 与 ProgressCircleStat 卡片可以嵌入 rsuite 的进度组件把“静态数值”升级为“进度可视化”这是文档中两个独立示例的用途。线性进度条progress-bar.md 在每张卡片内放置Progress.Lineimport { Stat, StatGroup, Progress } from rsuite; const App () ( StatGroup spacing{20} columns{3} Stat bordered Stat.LabelProcessing/Stat.Label Stat.Value1,200/Stat.Value Progress.Line percent{50} showInfo{false} / /Stat Stat bordered Stat.LabelPending/Stat.Label Stat.Value100/Stat.Value Progress.Line percent{10} showInfo{false} strokeColor#ffc107 / /Stat Stat bordered Stat.LabelCompleted/Stat.Label Stat.Value1,000/Stat.Value Progress.Line percent{45} showInfo{false} strokeColor#87d068 / /Stat /StatGroup );三个卡片分别用#ffc107琥珀、#87d068绿区分状态。注意 Stat 样式中已对嵌入的进度条做了处理src/Stat/styles/index.scss#L123-L125.rs-stat .rs-progress-line { padding: 0 }保证排版紧凑。环形进度条ring-progress.md 用ProgressCircle在数值左侧绘制圆环通过HStack/VStack排列图标与文字import { Stat, StatGroup, ProgressCircle, HStack, VStack } from rsuite; const App () ( StatGroup spacing{20} columns{3} Stat bordered HStack spacing{16} ProgressCircle percent{50} w{50} strokeWidth{10} trailWidth{10} / VStack Stat.LabelProcessing/Stat.Label Stat.Value1,200/Stat.Value /VStack /HStack /Stat Stat bordered HStack spacing{16} ProgressCircle percent{10} w{50} strokeColor#ffc107 strokeWidth{10} trailWidth{10} / VStack Stat.LabelPending/Stat.Label Stat.Value100/Stat.Value /VStack /HStack /Stat Stat bordered HStack spacing{16} ProgressCircle percent{45} w{50} strokeColor#87d068 strokeWidth{10} trailWidth{10} / VStack Stat.LabelCompleted/Stat.Label Stat.Value1,000/Stat.Value /VStack /HStack /Stat /StatGroup );环形进度放在数值左侧、正文纵向堆叠VStack的布局是数据卡片常见的“图标 主数值”形态。HStack/VStack同为 rsuite 的布局组件用于控制横向/纵向间距。图标让统计卡片更有辨识度icon.md 演示了Stat的icon属性图标会渲染在数值左侧形成“图标 数字”的经典卡片结构import { Stat, StatGroup } from rsuite; import PeoplesIcon from rsuite/icons/Peoples; import FunnelStepsIcon from rsuite/icons/FunnelSteps; const App () ( StatGroup spacing{20} columns{2} Stat bordered icon{PeoplesIcon colorblue style{{ fontSize: 30 }} /} Stat.Value21,000/Stat.Value Stat.LabelActive Users/Stat.Label /Stat Stat bordered icon{FunnelStepsIcon colorblue style{{ fontSize: 30 }} /} Stat.Value5.2%/Stat.Value Stat.LabelConversion Rate/Stat.Label /Stat /StatGroup );图标类型为ReactNode理论上可传任意元素包括自定义 SVG。在源码 src/Stat/Stat.tsx#L47 中图标被放入.rs-stat-icon容器CSS 中该容器为固定 50px 的正方形--rs-stat-icon-size: 50px居中显示、带圆角src/Stat/styles/index.scss#L18-L25。标签信息提示Stat.Label 的 info 与 uppercaseinfo-tip.md 展示了两个标签增强能力——info信息提示气泡与uppercase大写显示import { Stat } from rsuite; const App () ( Stat Stat.Label infoPage views is the total number of times the page has been viewed. uppercase Page Views /Stat.Label Stat.Value4,394/Stat.Value /Stat );底层实现值得展开Stat.Labelsrc/Stat/StatLabel.tsx在传入info时内部组合了WhisperTooltipIconButton三个组件以Whisper承载 Tooltiptriggerclick点击触发、placementtop显示在标签上方按钮使用圆形小号图标按钮circle sizexs appearancesubtle内嵌InfoOutlineIcon。也就是说你无需自己拼装气泡组件传入一段文案即可。uppercase则由样式层实现src/Stat/styles/index.scss#L49-L51.rs-stat-label-uppercase { text-transform: uppercase; }。值单位Stat.ValueUnit当数值需要带单位如%、$、KG时除了用formatOptions的style: unit也可以使用独立的Stat.ValueUnit子组件自由排版。示例 value-unit.mdimport { Stat, HStack } from rsuite; const App () ( HStack spacing{100} Stat Stat.Label Total Weight /Stat.Label Stat.Value 2,500 Stat.ValueUnitKG/Stat.ValueUnit /Stat.Value /Stat Stat Stat.Label Time Remaining /Stat.Label Stat.Value 3 Stat.ValueUnitDays/Stat.ValueUnit 12 Stat.ValueUnitHours/Stat.ValueUnit /Stat.Value /Stat /HStack );第二个示例展示了它的独特价值一个数值内可放置多个单位3 Days 12 Hours。Stat.ValueUnit源码同样基于createComponentspansrc/Stat/StatValueUnit.tsx渲染为span样式上字体更小--rs-stat-value-unit-font-size: var(--rs-font-size-xs)、字重 400与主数值2xl 字号、600 字重形成视觉对比src/Stat/styles/index.scss#L64-L67。组合布局StatGroup 网格容器单张统计卡片之外StatGroup用CSS Grid把多个Stat排成整齐的网格。示例 group.md 还结合SelectPicker实现了「列数/间距」的交互式调节import { Stat, StatGroup, SelectPicker, HStack } from rsuite; const App () { const [columns, setColumns] React.useState(4); const [spacing, setSpacing] React.useState(20); return ( StatGroup columns{columns} spacing{spacing} Stat bordered Stat.LabelProfits/Stat.Label HStack spacing{10} Stat.Value38,050/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat Stat bordered Stat.LabelRevenue/Stat.Label HStack spacing{10} Stat.Value4,635/Stat.Value Stat.Trend indicatordown5%/Stat.Trend /HStack /Stat Stat bordered Stat.LabelCost/Stat.Label HStack spacing{10} Stat.Value2,800/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat Stat bordered Stat.Label Expenses/Stat.Label HStack spacing{10} Stat.Value1,130/Stat.Value Stat.Trend3%/Stat.Trend /HStack /Stat /StatGroup hr / HStack SelectPicker data{[1, 2, 4].map(value ({ label: ${value} Columns, value }))} value{columns} onChange{setColumns} cleanable{false} / SelectPicker labelSpacing data{[10, 20, 30, 40, 50].map(value ({ label: ${value}px, value }))} value{spacing} onChange{setSpacing} cleanable{false} / /HStack / ); };参数与默认值columns默认4spacing默认6单位 px。源码级原理StatGroupsrc/StatGroup/StatGroup.tsx并不直接操作 DOM 样式而是通过cssVar把columns与spacing写入行内 CSS 变量const styles mergeStyles( style, cssVar(columns, columns), cssVar(spacing, spacing, getCssValue) );对应 SCSS 通过变量驱动网格src/StatGroup/styles/index.scss.rs-stat-group { --rs-stat-group-columns: 4; --rs-stat-group-spacing: 6px; display: grid; grid-template-columns: repeat(var(--rs-stat-group-columns), 1fr); grid-gap: var(--rs-stat-group-spacing); }因此运行时修改columns/spacing无需重排布局浏览器即可实时响应。响应式统计组useBreakpointValue 组合方案examples/responsive.tsx 展示了让 StatGroup 适配不同屏幕尺寸的官方写法——用 rsuite 的useBreakpointValue钩子按断点返回不同列数import { Stat, StatGroup, HStack, useBreakpointValue } from rsuite; const App () { const columns useBreakpointValue( { xs: 1, sm: 2, md: 4 }, { defaultValue: 1 } ); return ( StatGroup columns{columns} spacing{20} p{10} Stat bordered Stat.LabelProfits/Stat.Label HStack spacing{10} Stat.Value38,050/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat Stat bordered Stat.LabelRevenue/Stat.Label HStack spacing{10} Stat.Value4,635/Stat.Value Stat.Trend indicatordown5%/Stat.Trend /HStack /Stat Stat bordered Stat.LabelCost/Stat.Label HStack spacing{10} Stat.Value2,800/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat Stat bordered Stat.Label Expenses/Stat.Label HStack spacing{10} Stat.Value1,130/Stat.Value Stat.Trend3%/Stat.Trend /HStack /Stat /StatGroup ); };useBreakpointValue接受「断点 → 值」的映射这里配置为xs超小屏1 列、sm小屏2 列、md中屏及以上4 列并指定defaultValue: 1作为兜底。列数随屏幕宽度变化后StatGroup的 CSS 变量被更新网格自动重排无需额外编写媒体查询。完整 Props 参考表Stat属性类型默认值描述aselementTypediv组件的 HTML 标签borderedboolean是否显示边框childrenReactNode组件的子元素classPrefixstringstat组件 CSS 类名的前缀iconReactNode组件的图标此外Stat继承BoxPropssrc/Stat/Stat.tsx#L11因此 Box 的布局快捷属性w、h、p、m、flex、bg等均可直接使用。Stat.Label属性类型默认值描述aselementTypedt组件的 HTML 标签childrenReactNode组件的子元素classPrefixstringstat-label组件 CSS 类名的前缀infostring标签的信息提示点击标签旁图标弹出 Tooltipuppercaseboolean是否以大写字母显示标签Stat.Value属性类型默认值描述aselementTypedd组件的 HTML 标签childrenReactNode组件的子元素classPrefixstringstat-value组件 CSS 类名的前缀formatOptionsIntl.NumberFormatOptions数值的本地化格式选项valuenumber组件的数值传入后由内部Intl.NumberFormat格式化Stat.Trend属性类型默认值描述aselementTypespan组件的 HTML 标签childrenReactNode组件的子元素通常为变化百分比如10%classPrefixstringstat-trend组件 CSS 类名的前缀indicatorup \| down \| equal趋势指示器默认up源码中另有appearance: default | subtle默认default属性src/Stat/StatTrend.tsx#L47用于切换带底色块与纯色箭头两种外观。Stat.HelpText属性类型默认值描述aselementTypespan组件的 HTML 标签childrenReactNode组件的子元素classPrefixstringstat-help-text组件 CSS 类名的前缀StatGroup属性类型默认值描述aselementTypediv组件的 HTML 标签childrenReactNode组件的子元素classPrefixstringstat-group组件 CSS 类名的前缀columnsnumber4组件的列数spacingnumber6统计卡片之间的间距px也支持字符串如1rem深入验证测试与 Storybook 覆盖如果你想进一步确认组件行为仓库提供了完整的验证材料单元测试覆盖了全部 6 个组成部分src/Stat/test/Stat.spec.tsx、StatLabel.spec.tsx、StatValue.spec.tsx、StatTrend.spec.tsx、StatValueUnit.spec.tsx、StatHelpText.spec.tsx以及 src/StatGroup/test/StatGroup.spec.tsx。Storybook 示例见 src/Stat/stories/Stat.stories.tsx包含 Default、FormatOptions、Trend、Bordered、Icon、InfoTip、ValueUnit 七个场景与本文档示例一一对应。组件在 src/index.tsx 中被统一导出可直接import { Stat } from rsuite使用。小结Stat 家族的一页速查需求使用组件 / 属性基础统计卡片StatStat.LabelStat.ValueStat.HelpText本地化数字/货币/单位Stat.Value的valueformatOptions涨跌趋势Stat.Trend的indicatorup/down/equal与appearance卡片突出强调Stat的bordered进度可视化嵌入Progress.Line/ProgressCircle图标装饰Stat的icon标签说明气泡 / 大写Stat.Label的info/uppercase数值单位Stat.ValueUnit支持单数值多单位多卡片网格StatGroup的columns/spacing响应式列数useBreakpointValueStatGroup columnsStat 系列组件以“数据卡片”为最小单元通过子组件组合、formatOptions本地化与StatGroup网格布局可以快速搭建专业、可主题化、可响应式的统计看板是 rsuite 生态中做数据展示类页面的高性价比选择。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Leaflet 0.7.5 维护版发布解读0.7.x 分支最后一批关键缺陷修复与回移植技术内幕Leaflet 0.7.5 维护版发布解读0.7.x 分支最后一批关键缺陷修复与回移植技术内幕 2015 年 9 月Leaflet 官方博客发布 0.7.5前端UI组件rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战 本指南以 rsuite 官方文档 Grid 组件文档 https://link.gitc前端UI组件rsuite Stat 统计卡片与 Progress 进度条组合实战数据看板中的状态指标展示rsuite Stat 统计卡片与 Progress 进度条组合实战数据看板中的状态指标展示 本文以 rsuite 官方文档中“Stat Progress前端UI组件上一篇Journey API设计与实现构建RESTful接口的完整指南下一篇gh_mirrors/as/assert的API设计原则如何创建直观易用的PHP断言方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考