排行条 / Bar List

用于展示排名类数据，例如组件库的 Star 数对比。

组件库 Star 排名

直观看出各项数值差异。

shadcn/ui

74,200 ★

Ant Design

92,300 ★

Material UI

95,800 ★

Chakra UI

36,400 ★

Radix UI

16,500 ★

示例代码

const data = [
  { name: "shadcn/ui", value: 74200 },
  { name: "Ant Design", value: 92300 },
]

<BarList data={data} valueFormatter={(value) => `${value.toLocaleString()} ★`} />

页面访问排行

使用进度百分比强化对比关系。

/home

843100%

/documentation

38446%

/blocks

10813%

/imprint

465%

/cancellation

30%

示例代码

<BarList data={pageData} showProgress />

带图片排行

适合带头像或图标的榜单。

Avery Morgan

142 任务

Kai Lin

126 任务

Jules Smith

98 任务

示例代码

const data = [
  { name: "Avery Morgan", value: 142, imageSrc: "/avatars/124599.jpg" },
]

<BarList data={data} valueFormatter={(value) => `${value} 任务`} />

Loading dashboard...