# UGTimeline 时间线

> 适配器：React；状态：available；slug：`timeline`。

以有序列表展示事件、审批和发布记录的先后关系。

## 适用场景

- 按时间顺序展示事件、发布记录、审批过程或操作日志。

## 不适用场景

- 强调当前可执行流程使用 Steps；高密度二维记录使用 Table。

## 公开入口

- 包入口：`@ug666/ui-react/components`
- 公开成员：`UGTimeline`、`UGTimelineItem`、`UGTimelineMarker`、`UGTimelineContent`、`UGTimelineTime`、`UGTimelineTitle`、`UGTimelineDescription`
- 交互文档：[https://ui.ug666.top/react/components/timeline](https://ui.ug666.top/react/components/timeline)

```tsx
import { UGTimeline, UGTimelineItem, UGTimelineMarker, UGTimelineContent, UGTimelineTime, UGTimelineTitle, UGTimelineDescription } from '@ug666/ui-react/components'
```

## 使用规则

- 默认使用纵向布局；横向布局会在窄容器内自身滚动，不把横向滚动交给整页。
- 受控值使用当前组件声明的 value/onValueChange 或公开回调。
- 涉及 Hook、Portal 或浏览器状态时保留 client boundary。
- 只通过公开 Props、事件、插槽、class/className 和语义 Token 扩展。

## 相关候选

- [steps](https://ui.ug666.top/ai/react/components/steps.md)
- [list](https://ui.ug666.top/ai/react/components/list.md)
- [badge](https://ui.ug666.top/ai/react/components/badge.md)

## 生成前检查

- 当前适配器是否真实提供该组件。
- 导入路径、组件名和 API 是否存在于当前版本类型声明。
- 是否覆盖长文本、窄容器、键盘、焦点、disabled、loading 和错误状态。