cnd-components-mcp/componentData/components/时间线 Timeline.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

时间线也称时间轴，常用于信息需要从上至下按时间排列、或需要有一条时间轴进行视觉上的串联的场景，向用户显示只读内容，例如历史记录等。

## 示例

### 基础形态

```tsx
import React from 'react';
import { Timeline } from '@alicloud/console-components';

const { Item: TimelineItem } = Timeline;

const dataSource = [
  {
    id: 1,
    title: '2024-08-08',
    state: 'process',
    content: '时间信息或者补充描述',
  },
  {
    id: 2,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 3,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 4,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 5,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
] as const;

export default () => {
  return (
    <div>
      <Timeline>
        {
          dataSource.map((item) => {
            const { id, ...restProps } = item;

            return (
              <TimelineItem
                key={id}
                {...restProps}
              />
            );
          })
        }
      </Timeline>
    </div>
  );
};

export const meta = {
  title: '显示时间或补充描述',
  describe: '',
};

```

## API

### Timeline

| 参数      | 说明                                        | 类型                  | 默认值 | 是否必填 | 支持版本 |
| --------- | ------------------------------------------- | --------------------- | ------ | -------- | -------- |
| fold      | 自定义折叠选项                              | Array\<FoldItem>      | -      |          | -        |
| className | 自定义类名                                  | string                | -      |          | -        |
| animation | 展示动画                                    | boolean               | true   |          | -        |
| mode      | 展示的模式，left 为左，alternate 为交替显示 | 'left' | 'alternate' | 'left' |          | 1.23.18  |

### Timeline.Item

| 参数      | 说明                                        | 类型                                        | 默认值 | 是否必填 | 支持版本 |
| --------- | ------------------------------------------- | ------------------------------------------- | ------ | -------- | -------- |
| state     | 节点状态                                    | 'done' | 'process' | 'error' | 'success' | 'done' |          | -        |
| icon      | 图标                                        | string                                      | -      |          | -        |
| dot       | 自定义时间轴节点                            | React.ReactNode                             | -      |          | -        |
| time      | 格式化后的时间                              | React.ReactNode                             | -      |          | -        |
| title     | 标题                                        | React.ReactNode                             | -      |          | -        |
| timeLeft  | 左侧时间                                    | React.ReactNode                             | -      |          | -        |
| content   | 右侧内容                                    | React.ReactNode                             | -      |          | -        |
| animation | 展示动画                                    | boolean                                     | true   |          | -        |
| mode      | 展示的模式，left 为左，alternate 为交替显示 | 'left' | 'alternate'                       | 'left' |          | 1.23.18  |

## 更多示例

```tsx
```

```tsx
```

```tsx
```

```tsx
```

```tsx
```