Timeline
Vertical display timeline.
When To Use
- When a series of information needs to be ordered by time (ascending or descending).
- When you need a timeline to make a visual connection.
Examples
-
Basic ·
basic -
Variant ·
variant -
Loading and Reversing ·
pending -
Alternate ·
alternate -
Horizontal ·
horizontal -
Custom ·
custom -
End alternate ·
end -
Title ·
title -
Title Offset ·
title-span -
Semantic Sample ·
semantic -
Custom semantic dom styling ·
style-class
API
Common props ref：Common props
Timeline
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| items | Each node of timeline | Items[] | - | × | |
| mode | By sending alternate the timeline will distribute the nodes to the left and right | start | alternate | end | start | × | |
| orientation | Set the direction of the timeline | vertical | horizontal | vertical | × | |
Set the last ghost node's existence or its content. Use item.loading instead | ReactNode | false | × | ||
Set the dot of the last ghost node when pending is true. Use item.icon instead | ReactNode | <LoadingOutlined /> | × | ||
| reverse | Whether reverse nodes or not | boolean | false | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| titleSpan | Set the title span space. It is the distance to the center of the dot Native explanatory image | number | string | 12 | × | |
| variant | Config style variant | filled | outlined | outlined | × |
Items
Node of timeline.
| Property | Description | Type | Default |
|---|---|---|---|
| color | Set the circle's color to blue, red, green, gray or other custom colors | string | blue |
| content | Set the content | ReactNode | - |
Set the content. Please use content instead | ReactNode | - | |
Customize timeline dot. Please use icon instead | ReactNode | - | |
| icon | Customize node icon | ReactNode | - |
Set the label. Please use title instead | ReactNode | - | |
| loading | Set loading state | boolean | false |
| placement | Customize node placement | start | end | - |
Customize node position. Please use placement instead | start | end | - | |
| title | Set the title | ReactNode | - |
Semantic DOM
Timeline
| Semantic node | Native description | Version |
|---|---|---|
root | Root element with timeline container list style reset, vertical layout, dot icon, outlined style, alternate layout and other basic container styles | — |
item | Item element with single timeline node relative positioning, margin, padding, font size, finish state, color theme, layout direction and other node basic styles | — |
itemWrapper | Item wrapper element with timeline node content wrapping container styles | — |
itemIcon | Item icon element with node head icon absolute positioning, width/height size, background color, border, border radius, wave animation and other icon styles | — |
itemSection | Item section element with section container containing header and content flex layout, wrap, gap and other layout styles | — |
itemHeader | Item header element with header area layout containing title and rail, alignment, text direction and other styles | — |
itemTitle | Item title element with node title text font size, line height, color and other text styles | — |
itemContent | Item content element with node detail content relative positioning, top offset, left margin, text color, word break and other content styles | — |
itemRail | Item rail element with timeline node connection track line absolute positioning, top offset, left offset, height, border color, width, style and other connection line styles | — |
Semantic description source: vendor/components/timeline/demo/_semantic.tsx
Timeline Items
| Semantic node | Native description | Version |
|---|---|---|
root | Root element | — |
wrapper | Item wrapper element | — |
icon | Item icon element | — |
section | Item section element | — |
header | Item header element | — |
title | Item title element | — |
content | Item content element | — |
rail | Item rail element | — |
Semantic description source: vendor/components/timeline/demo/_semantic_items.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
| Token | Type | Native description |
|---|---|---|
tailColor? | string | Line color |
tailWidth? | number | string | Line width |
dotBorderWidth? | number | string | Border width of node |
dotSize? | number | string | Node size |
dotBg? | string | Background color of node |
itemPaddingBottom? | number | Bottom padding of item |
Declaration source: vendor/components/timeline/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
import genHorizontalStyle from './horizontal';
export interface ComponentToken {
/**
* @desc 轨迹颜色
* @descEN Line color
*/
tailColor?: string;
/**
* @desc 轨迹宽度
* @descEN Line width
*/
tailWidth?: number | string;
/**
* @desc 节点边框宽度
* @descEN Border width of node
*/
dotBorderWidth?: number | string;
/**
* @desc 节点大小
* @descEN Node size
*/
dotSize?: number | string;
/**
* @desc 节点背景色
* @descEN Background color of node
*/
dotBg?: string;
/**
* @desc 时间项下间距
* @descEN Bottom padding of item
*/
itemPaddingBottom?: number;
}
export interface TimelineToken extends FullToken<'Timeline'> {
itemHeadSize: number;
customHeadPaddingVertical: number;
paddingInlineEnd: number;
}
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/timeline/Timeline.tsxvendor/components/timeline/style/index.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.