History

HistoryItem 时间轴条目（3 变体 × 8 色），HistoryGrouped 分组容器 + 右侧进度柱。

HistoryItem

时间轴条目。3 变体（regular / badge / profile）× 8 色。

Import

import { HistoryItem, HistoryGrouped } from "@forge-ui/react";

Usage

Order Placed

10:30 AM

Your order has been submitted

1<HistoryItem
2  title="Order Placed"
3  description="Your order has been submitted"
4  datetime="10:30 AM"
5  color="purple"
6/>

Variants

3 种指示器样式。badge 需传 icon，profile 需传 avatar。

Regular

10:00

Badge

10:30

Profile

11:00

1<HistoryItem variant="regular" title="Regular" datetime="10:00" />
2<HistoryItem variant="badge" title="Badge" datetime="10:30" icon={<CheckCircleLinear size={20} />} />
3<HistoryItem variant="profile" title="Profile" datetime="11:00" avatar={avatar} />

Datetime Position

Inline Time

10:30

Time shown on the right

Bottom Time

Time below description

10:30

1<HistoryItem title="Item" datetime="10:30" showDatetime="inline" />
2<HistoryItem title="Item" datetime="10:30" showDatetime="bottom" />

API

Attribute	Type	Default	Description
`variant`	`'regular' \| 'badge' \| 'profile'`	`'regular'`	左侧指示器样式：实心圆点 / 图标徽章 / 头像。
`color`	`'purple' \| 'blue' \| 'green' \| 'red' \| 'yellow' \| 'cyan' \| 'gray' \| 'black'`	`'purple'`	8 种语义色，驱动 dot / badge 颜色。
`title`	`string`	`—`	条目标题。
`description`	`ReactNode`	`—`	可选描述。
`datetime`	`string`	`—`	时间文案。
`showDatetime`	`'inline' \| 'bottom'`	`'inline'`	时间位置：标题右侧或条目底部。
`tags`	`ReactNode`	`—`	底部标签槽。
`icon`	`ReactNode`	`—`	badge 变体内图标。
`avatar`	`string`	`—`	profile 变体头像 URL。
`showConnector`	`boolean`	`true`	是否渲染指示器下方的连接线。

HistoryGrouped

时间轴容器卡：header + 副标题 + 条目列表 + 右侧进度柱。

Usage

Recent Activity

Last 24 hours

10:00

Viewed report

10:30

Logout

11:00

1<HistoryGrouped
2  title="Recent Activity"
3  subtitle="Last 24 hours"
4  color="purple"
5  progressHeight="40%"
6  items={[
7    { title: "Login", datetime: "10:00" },
8    { title: "Viewed report", datetime: "10:30" },
9    { title: "Logout", datetime: "11:00" },
10  ]}
11/>

API

Attribute	Type	Default	Description
`title`	`string`	`—`	分组标题。
`subtitle`	`string`	`—`	副标题。
`badge`	`ReactNode`	`—`	标题右侧徽标槽。
`items`	`HistoryItemProps[]`	`—`	条目数组，自动串成时间轴。
`action`	`ReactNode`	`—`	右上角操作槽。
`progressHeight`	`string`	`'30%'`	右侧 progress 柱高度（CSS 值，如 "40%"）。
`color`	`HistoryItemColor`	`'purple'`	统一覆盖所有 item 的颜色。

看所有变体 →