astro
stats
display
data
StatsDisplay
简介
StatsDisplay 组件用于展示统计数据，采用极简设计风格。适合在首页、关于我们页面或产品介绍页面中展示关键数据指标。组件支持多种布局模式和自定义样式，能够完美融入各种设计风格。
组件特性：
- 极简美学设计，大数字、细字重、简洁布局
- 支持多种字体大小和字重选项
- 灵活的颜色定制，支持全局和单项颜色设置
- 响应式设计，自动适配不同屏幕尺寸
- 多种对齐方式和间距选项
- 支持紧凑模式，适应不同空间需求
案例
10+
年经验
500+
客户
1000+
项目
50+
专家
Props
align
对齐方式，支持 left、center、right。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayAlignLeft
* @description StatsDisplay align="left" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const alignmentStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={alignmentStats}
valueSize="2xl"
valueColor="#8b5cf6"
labelColor="#6b7280"
valueWeight="medium"
labelWeight="normal"
gap="xl"
align="left"
/>
---
/**
* @component StatsDisplayAlignCenter
* @description StatsDisplay align="center" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const alignmentStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={alignmentStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
valueWeight="medium"
labelWeight="normal"
gap="xl"
align="center"
/>
---
/**
* @component StatsDisplayAlignRight
* @description StatsDisplay align="right" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const alignmentStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={alignmentStats}
valueSize="2xl"
valueColor="#f59e0b"
labelColor="#6b7280"
valueWeight="medium"
labelWeight="normal"
gap="xl"
align="right"
/>
class
自定义CSS类，可用于覆盖默认样式。
10+
年经验
500+
客户
1000+
项目
10+
年经验
500+
客户
1000+
项目
---
/**
* @component StatsDisplayDefaultStyle
* @description StatsDisplay 默认样式示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const customStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
];
---
<StatsDisplay
stats={customStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
/>
---
/**
* @component StatsDisplayCustomStyleExample
* @description StatsDisplay 自定义样式示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const customStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
];
---
<StatsDisplay
stats={customStats}
valueSize="2xl"
valueColor="#10b981"
labelColor="#6b7280"
class="cosy:border-2 cosy:border-primary cosy:bg-primary/5 cosy:rounded-lg cosy:p-6"
/>
columns
列数设置，控制每行显示的统计项目数量。
10+
年经验
500+
客户
1000+
项目
50+
专家
10+
年经验
500+
客户
1000+
项目
50+
专家
10+
年经验
500+
客户
1000+
项目
50+
专家
---
/**
* @component StatsDisplayColumns2
* @description StatsDisplay columns={2} 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const columnsStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
{ value: "50+", label: "专家" },
];
---
<StatsDisplay
stats={columnsStats}
columns={2}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
gap="xl"
align="center"
/>
---
/**
* @component StatsDisplayColumns3
* @description StatsDisplay columns={3} 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const columnsStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
{ value: "50+", label: "专家" },
];
---
<StatsDisplay
stats={columnsStats}
columns={3}
valueSize="2xl"
valueColor="#10b981"
labelColor="#6b7280"
gap="xl"
align="center"
/>
---
/**
* @component StatsDisplayColumns4
* @description StatsDisplay columns={4} 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const columnsStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
{ value: "50+", label: "专家" },
];
---
<StatsDisplay
stats={columnsStats}
columns={4}
valueSize="2xl"
valueColor="#f59e0b"
labelColor="#6b7280"
gap="xl"
align="center"
/>
compact
是否使用紧凑模式，减少间距和字体大小。
100%
开源
MIT
协议
2025
版本
100%
开源
MIT
协议
2025
版本
---
/**
* @component StatsDisplayNormalMode
* @description StatsDisplay 默认模式示例（非 compact）
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const compactStats = [
{ value: "100%", label: "开源" },
{ value: "MIT", label: "协议" },
{ value: "2025", label: "版本" },
];
---
<StatsDisplay
stats={compactStats}
compact={false}
columns={3}
valueSize="2xl"
valueColor="#10b981"
labelColor="#6b7280"
valueWeight="semibold"
labelWeight="normal"
gap="lg"
align="center"
/>
---
/**
* @component StatsDisplayCompactMode
* @description StatsDisplay 紧凑模式示例（compact=true）
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const compactStats = [
{ value: "100%", label: "开源" },
{ value: "MIT", label: "协议" },
{ value: "2025", label: "版本" },
];
---
<StatsDisplay
stats={compactStats}
compact={true}
columns={3}
valueSize="2xl"
valueColor="#10b981"
labelColor="#6b7280"
valueWeight="semibold"
labelWeight="normal"
gap="lg"
align="center"
/>
gap
项目间距，支持 sm、md、lg、xl、2xl、3xl。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayGapSm
* @description StatsDisplay gap="sm" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const gapStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={gapStats}
gap="sm"
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
align="center"
/>
---
/**
* @component StatsDisplayGapLg
* @description StatsDisplay gap="lg" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const gapStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={gapStats}
gap="lg"
valueSize="2xl"
valueColor="#10b981"
labelColor="#6b7280"
align="center"
/>
---
/**
* @component StatsDisplayGap3xl
* @description StatsDisplay gap="3xl" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const gapStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={gapStats}
gap="3xl"
valueSize="2xl"
valueColor="#f59e0b"
labelColor="#6b7280"
align="center"
/>
labelColor
标签颜色，支持十六进制颜色值。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayLabelColorDefault
* @description StatsDisplay 默认标签颜色示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorPrimary
* @description StatsDisplay labelColor="primary" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="primary"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorSecondary
* @description StatsDisplay labelColor="secondary" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="secondary"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorSuccess
* @description StatsDisplay labelColor="success" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="success"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorWarning
* @description StatsDisplay labelColor="warning" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="warning"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorError
* @description StatsDisplay labelColor="error" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="error"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorInfo
* @description StatsDisplay labelColor="info" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="info"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorBlue
* @description StatsDisplay labelColor="blue" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="blue"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorGreen
* @description StatsDisplay labelColor="green" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="green"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorYellow
* @description StatsDisplay labelColor="yellow" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="yellow"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorRed
* @description StatsDisplay labelColor="red" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="red"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorPurple
* @description StatsDisplay labelColor="purple" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="purple"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorPink
* @description StatsDisplay labelColor="pink" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="pink"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorIndigo
* @description StatsDisplay labelColor="indigo" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="indigo"
align="center"
/>
---
/**
* @component StatsDisplayLabelColorGray
* @description StatsDisplay labelColor="gray" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="gray"
align="center"
/>
labelWeight
标签字重，支持 thin、light、normal、medium、semibold、bold。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayLabelWeightLight
* @description StatsDisplay labelWeight="light" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
labelWeight="light"
align="center"
/>
---
/**
* @component StatsDisplayLabelWeightNormal
* @description StatsDisplay labelWeight="normal" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
labelWeight="normal"
align="center"
/>
---
/**
* @component StatsDisplayLabelWeightBold
* @description StatsDisplay labelWeight="bold" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const labelWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={labelWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
labelWeight="bold"
align="center"
/>
stats
统计数据数组，每个项目包含 value（数值）和 label（标签）。
10+
年经验
500+
客户
1000+
项目
10M+
用户
20+
奖项
99%
满意度
---
/**
* @component StatsDisplayBasicStats
* @description StatsDisplay 基础数据示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const basicStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
{ value: "1000+", label: "项目" },
];
---
<StatsDisplay
stats={basicStats}
valueSize="2xl"
valueColor="primary"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayColorfulStats
* @description StatsDisplay 带自定义颜色的数据示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const colorfulStats = [
{ value: "10M+", label: "用户", color: "blue" },
{ value: "20+", label: "奖项", color: "success" },
{ value: "99%", label: "满意度", color: "warning" },
];
---
<StatsDisplay
stats={colorfulStats}
valueSize="2xl"
labelColor="#6b7280"
align="center"
/>
valueColor
数值颜色，支持十六进制颜色值。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayValueColorDefault
* @description StatsDisplay 默认数值颜色示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorPrimary
* @description StatsDisplay valueColor="primary" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="primary"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorSecondary
* @description StatsDisplay valueColor="secondary" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="secondary"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorSuccess
* @description StatsDisplay valueColor="success" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="success"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorWarning
* @description StatsDisplay valueColor="warning" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="warning"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorError
* @description StatsDisplay valueColor="error" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="error"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorInfo
* @description StatsDisplay valueColor="info" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="info"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorBlue
* @description StatsDisplay valueColor="blue" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="blue"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorGreen
* @description StatsDisplay valueColor="green" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="green"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorYellow
* @description StatsDisplay valueColor="yellow" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="yellow"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorRed
* @description StatsDisplay valueColor="red" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="red"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorPurple
* @description StatsDisplay valueColor="purple" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="purple"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorPink
* @description StatsDisplay valueColor="pink" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="pink"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorIndigo
* @description StatsDisplay valueColor="indigo" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="indigo"
labelColor="gray"
align="center"
/>
---
/**
* @component StatsDisplayValueColorGray
* @description StatsDisplay valueColor="gray" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueColorStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueColorStats}
valueSize="2xl"
valueColor="gray"
labelColor="gray"
align="center"
/>
valueSize
数值字体大小，支持从 xs 到 6xl 的完整字体大小。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayValueSizeXl
* @description StatsDisplay valueSize="xl" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueSizeStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueSizeStats}
valueSize="xl"
valueColor="#3b82f6"
labelColor="#6b7280"
align="center"
/>
---
/**
* @component StatsDisplayValueSize3xl
* @description StatsDisplay valueSize="3xl" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueSizeStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueSizeStats}
valueSize="3xl"
valueColor="#10b981"
labelColor="#6b7280"
align="center"
/>
---
/**
* @component StatsDisplayValueSize6xl
* @description StatsDisplay valueSize="6xl" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueSizeStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueSizeStats}
valueSize="6xl"
valueColor="#f59e0b"
labelColor="#6b7280"
align="center"
/>
valueWeight
数值字重，支持 thin、light、normal、medium、semibold、bold。
10+
年经验
500+
客户
10+
年经验
500+
客户
10+
年经验
500+
客户
---
/**
* @component StatsDisplayValueWeightThin
* @description StatsDisplay valueWeight="thin" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
valueWeight="thin"
align="center"
/>
---
/**
* @component StatsDisplayValueWeightNormal
* @description StatsDisplay valueWeight="normal" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
valueWeight="normal"
align="center"
/>
---
/**
* @component StatsDisplayValueWeightBold
* @description StatsDisplay valueWeight="bold" 示例
*/
import { StatsDisplay } from "@coffic/cosy-ui";
const valueWeightStats = [
{ value: "10+", label: "年经验" },
{ value: "500+", label: "客户" },
];
---
<StatsDisplay
stats={valueWeightStats}
valueSize="2xl"
valueColor="#3b82f6"
labelColor="#6b7280"
valueWeight="bold"
align="center"
/>
使用场景
企业官网首页
在企业官网的首页展示公司关键数据，如成立年限、服务客户数、完成项目数等。
产品介绍页面
在产品介绍页面展示产品的关键指标，如下载量、用户数、评分等。
关于我们页面
在关于我们页面展示团队规模、经验年限、获得奖项等数据。
仪表板页面
在仪表板页面展示各种统计数据和关键指标。
最佳实践
- 保持简洁：避免在一个组件中展示过多数据，建议不超过6个项目
- 统一风格：在同一页面中使用统一的颜色和字体风格
- 响应式考虑：在不同屏幕尺寸下测试显示效果
- 数据准确性：确保展示的数据准确且及时更新
- 视觉层次：通过字体大小和颜色建立清晰的视觉层次
注意事项
- 数值建议使用简洁的格式，如 “10K+”、“99%” 等
- 标签文字应简洁明了，避免过长
- 在移动端使用时，建议减少列数或使用紧凑模式
- 颜色选择应符合整体设计风格和品牌色彩