Timeline 时间轴

按时间顺序显示事件,支持交替或垂直布局。

导入

import { Timeline } from 'asterui'

示例

基础时间轴

带有交替内容的简单时间轴。

1984
First Macintosh computer
iMac
1998

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline>
        <Timeline.Item start="1984" icon={<CheckCircleIcon />} end="First Macintosh computer" endBox />
        <Timeline.Item start="iMac" icon={<CheckCircleIcon />} end="1998" startBox />
      </Timeline>
    )
}

export default App

垂直时间轴

垂直堆叠项目。

Apple Watch
2015
2015
2017
iPhone X
Apple Silicon M1
2020
2020

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="2015" icon={<CheckCircleIcon className="text-primary" />} end="Apple Watch" endBox />
        <Timeline.Item start="2017" icon={<CheckCircleIcon className="text-primary" />} end="iPhone X" endBox />
        <Timeline.Item start="2020" icon={<CheckCircleIcon className="text-primary" />} end="Apple Silicon M1" endBox />
      </Timeline>
    )
}

export default App

水平时间轴

水平显示项目。

Step 1
Planning
Step 2
Development
Step 3
Testing
Step 4
Launch

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline horizontal>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Planning" endBox />
        <Timeline.Item start="Step 2" icon={<CheckCircleIcon />} end="Development" endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Testing" endBox />
        <Timeline.Item start="Step 4" icon={<ClockIcon />} end="Launch" endBox />
      </Timeline>
    )
}

export default App

紧凑时间轴

所有内容都在一侧。

1984
First Macintosh computer
1998
iMac

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical compact>
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1984</time>
              <div className="text-lg font-black">First Macintosh computer</div>
            </div>
          }
          endBox
        />
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1998</time>
              <div className="text-lg font-black">iMac</div>
            </div>
          }
          endBox
        />
      </Timeline>
    )
}

export default App

对齐图标

将图标对齐到开始而不是居中。

Project Started
2023
2023
2024
Beta Release
Public Launch
2025
2025

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical snapIcon>
        <Timeline.Item start="2023" icon={<CheckCircleIcon />} end="Project Started" endBox />
        <Timeline.Item start="2024" icon={<CheckCircleIcon />} end="Beta Release" endBox />
        <Timeline.Item start="2025" icon={<ClockIcon />} end="Public Launch" endBox />
      </Timeline>
    )
}

export default App

颜色

对时间轴项目应用不同的颜色。

Task 1
Completed
Completed
In Progress
Task 2
Task 3
Warning
Warning
Error
Task 4

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon, ExclamationCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Completed" icon={<CheckCircleIcon />} end="Task 1" endBox color="success" />
        <Timeline.Item start="In Progress" icon={<ClockIcon />} end="Task 2" endBox color="info" />
        <Timeline.Item start="Warning" icon={<ExclamationCircleIcon />} end="Task 3" endBox color="warning" />
        <Timeline.Item start="Error" icon={<ExclamationCircleIcon />} end="Task 4" endBox color="error" />
      </Timeline>
    )
}

export default App

模式: 开始

所有项目对齐到开始。

2020
Event One
2021
Event Two
2022
Event Three

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="start">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

模式: 结束

所有项目对齐到结束。

Event One
2020
2020
Event Two
2021
2021
Event Three
2022
2022

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="end">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

待处理状态

在末尾显示正在进行的活动。

Meeting started
9:00 AM
9:00 AM
9:30 AM
Presentation complete
Q&A session
10:00 AM
10:00 AM
Loading
Recording in progress...

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical pending="Recording in progress...">
        <Timeline.Item start="9:00 AM" icon={<CheckCircleIcon />} end="Meeting started" endBox color="success" />
        <Timeline.Item start="9:30 AM" icon={<CheckCircleIcon />} end="Presentation complete" endBox color="success" />
        <Timeline.Item start="10:00 AM" icon={<CheckCircleIcon />} end="Q&A session" endBox color="success" />
      </Timeline>
    )
}

export default App

加载状态

在单个项目上显示加载微调器。

Complete
Step 1
Step 1
Step 2
Loading
Processing...
Pending
Step 3
Step 3

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Complete" endBox color="success" />
        <Timeline.Item start="Step 2" loading end="Processing..." endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Pending" endBox />
      </Timeline>
    )
}

export default App

反向顺序

反转时间轴项目的顺序。

First Event
1st
1st
2nd
Second Event
Third Event
3rd
3rd

import { Timeline, Button } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'
import { useState } from 'react'

function App() {
  const [reversed, setReversed] = useState(false);
  
  return (
      <div className="space-y-4">
        <Button size="sm" onClick={() => setReversed(!reversed)}>
          {reversed ? 'Normal Order' : 'Reverse Order'}
        </Button>
        <Timeline vertical reverse={reversed}>
          <Timeline.Item start="1st" icon={<CheckCircleIcon />} end="First Event" endBox />
          <Timeline.Item start="2nd" icon={<CheckCircleIcon />} end="Second Event" endBox />
          <Timeline.Item start="3rd" icon={<CheckCircleIcon />} end="Third Event" endBox />
        </Timeline>
      </div>
    )
}

export default App

声明式 API

使用 items 属性进行数据驱动的时间轴。

Company Founded
2020
2020
2021
Series A Funding
Global Expansion
2022
2022
2023
IPO

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  const items = [
    { key: '1', start: '2020', end: 'Company Founded', endBox: true, icon: <CheckCircleIcon />, color: 'primary' },
    { key: '2', start: '2021', end: 'Series A Funding', endBox: true, icon: <CheckCircleIcon />, color: 'success' },
    { key: '3', start: '2022', end: 'Global Expansion', endBox: true, icon: <CheckCircleIcon />, color: 'info' },
    { key: '4', start: '2023', end: 'IPO', endBox: true, icon: <CheckCircleIcon />, color: 'warning' },
  ];
  
  return (
      <Timeline vertical items={items} />
    )
}

export default App

API

`Timeline`

属性	描述	类型	默认值
`children`	时间轴项目(复合模式)	`React.ReactNode`	`-`
`items`	时间轴项目(声明式 API)	`TimelineItemConfig[]`	`-`
`vertical`	垂直布局方向	`boolean`	`false`
`horizontal`	水平布局(默认)	`boolean`	`false`
`compact`	所有项目在一侧	`boolean`	`false`
`snapIcon`	将图标对齐到开始而不是居中	`boolean`	`false`
`mode`	项目分布布局	`'start' \| 'alternate' \| 'end'`	`'alternate'`
`reverse`	反转项目顺序	`boolean`	`false`
`pending`	在末尾显示待处理/加载指示器	`React.ReactNode`	`-`
`pendingIcon`	待处理项目的自定义图标	`React.ReactNode`	`-`
`data-testid`	组件的测试 ID	`string`	`'timeline'`
`aria-label`	时间轴的可访问标签	`string`	`-`
`className`	额外的 CSS 类	`string`	`-`

`Timeline.Item`

属性	描述	类型	默认值
`start`	开始位置的内容(左/上)	`React.ReactNode`	`-`
`end`	结束位置的内容(右/下)	`React.ReactNode`	`-`
`icon`	中央图标或标记	`React.ReactNode`	`-`
`startBox`	在 timeline-box 中包装开始内容	`boolean`	`false`
`endBox`	在 timeline-box 中包装结束内容	`boolean`	`false`
`color`	时间轴点/连接器的颜色	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`-`
`loading`	显示加载微调器而不是图标	`boolean`	`false`
`data-testid`	此项目的测试 ID	`string`	`-`
`className`	额外的 CSS 类	`string`	`-`

`TimelineItemConfig`

属性	描述	类型	默认值
`key`	项目的唯一键	`React.Key`	`-`
`start`	开始位置的内容	`React.ReactNode`	`-`
`end`	结束位置的内容	`React.ReactNode`	`-`
`icon`	中央图标或标记	`React.ReactNode`	`-`
`startBox`	在 timeline-box 中包装开始内容	`boolean`	`false`
`endBox`	在 timeline-box 中包装结束内容	`boolean`	`false`
`color`	时间轴点/连接器的颜色	`TimelineColor`	`-`
`loading`	显示加载微调器	`boolean`	`false`
`className`	额外的 CSS 类	`string`	`-`

可访问性

使用语义列表结构(role="list")以供屏幕阅读器使用
时间轴项目按顺序宣布
支持 aria-label 以描述时间轴目的
连接器是装饰性的,对辅助技术隐藏
加载状态包含可视微调器指示器