astro
stats
display
data
StatsDisplay
Introduction
The StatsDisplay component is designed for showcasing statistical data with a minimalist design approach. It’s perfect for displaying key metrics on homepages, about pages, or product introduction pages. The component supports multiple layout modes and custom styling options, seamlessly integrating into various design styles.
Component Features:
- Minimalist aesthetic design with large numbers, thin font weights, and clean layouts
- Support for multiple font sizes and weight options
- Flexible color customization with global and individual color settings
- Responsive design that automatically adapts to different screen sizes
- Multiple alignment options and spacing configurations
- Compact mode support for different space requirements
Examples
10+
年经验
500+
客户
1000+
项目
50+
专家
Props
align
Alignment option, supporting 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
Custom CSS class for overriding default styles.
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
Number of columns to control how many statistical items are displayed per row.
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
Whether to use compact mode, reducing spacing and font sizes.
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
Spacing between items, supporting 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
Color for labels, supporting hexadecimal color values.
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
Font weight for labels, supporting 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
Array of statistical data, where each item contains value (numeric value) and label (description).
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
Color for values, supporting hexadecimal color values.
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
Font size for values, supporting the complete range from xs to 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
Font weight for values, supporting 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"
/>
Use Cases
Corporate Website Homepage
Display key company data on corporate website homepages, such as years in business, number of clients served, completed projects, etc.
Product Introduction Pages
Showcase key product metrics on product introduction pages, such as download counts, user numbers, ratings, etc.
About Us Pages
Display team size, years of experience, awards received, and other data on about us pages.
Dashboard Pages
Showcase various statistical data and key metrics on dashboard pages.
Best Practices
- Keep it Simple: Avoid displaying too many data points in one component; recommend no more than 6 items
- Consistent Styling: Use unified colors and font styles across the same page
- Responsive Considerations: Test display effects on different screen sizes
- Data Accuracy: Ensure displayed data is accurate and up-to-date
- Visual Hierarchy: Establish clear visual hierarchy through font sizes and colors
Notes
- Values should use concise formats like “10K+”, “99%”, etc.
- Label text should be concise and clear, avoiding excessive length
- When using on mobile devices, consider reducing column count or using compact mode
- Color choices should align with overall design style and brand colors