Timeline 时间轴

如何引入基本用法节点类型自定义节点时间轴位置使用 dataSourceAPI 参考Accessibility设计变量展示类 · Timeline 时间轴时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。版本对比API 文档设计文档代码演示如何引入import { Timeline } from '@douyinfe/semi-ui';

基本用法import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

第一个节点内容

第二个节点内容

第三个节点内容

);

节点类型通过 type 可以设置节点类型，对应原点会变成相应的颜色，可选：default，ongoing， success， warning， error。import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

审核中

发布成功

审核失败

);

自定义节点可以通过 dot 自定义图标，color 自定义圆点色值。通过设置 children 的样式可以自定义节点样式。import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

import { IconAlertTriangle } from '@douyinfe/semi-icons';

() => (

默认样式的节点

} type="warning">

自定义图标

自定义节点颜色

自定义节点样式

);

时间轴位置通过 mode 属性可以设置时间的位置，共有 4 种模式可选：left， center， alternate， right。时间轴在左侧（默认）import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

第一个节点内容

第二个节点内容

第三个节点内容

第四个节点内容

);

时间节点在左侧import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

第一个节点内容

第二个节点内容

第三个节点内容

第四个节点内容

);

交替展现import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

第一个节点内容

第二个节点内容

第三个节点内容

第四个节点内容

);

时间轴在右侧import React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

() => (

第一个节点内容

第二个节点内容

第三个节点内容

第四个节点内容

);

使用 dataSourceimport React from 'react';

import { Timeline } from '@douyinfe/semi-ui';

import { IconAlertTriangle } from '@douyinfe/semi-icons';

() => (

mode="alternate"

dataSource={[

{

time: '2019-07-14 10:35',

extra: '节点辅助说明信息',

content: '第一个节点内容',

type: 'ongoing',

},

{

time: '2019-06-13 16:17',

extra: '节点辅助说明信息',

content: 第二个节点内容,

color: 'pink',

},

{

time: '2019-05-14 18:34',

extra: '节点辅助说明信息',

dot: ,

content: '第三个节点内容',

type: 'warning',

},

{

time: '2019-05-09 09:12',

extra: '节点辅助说明信息',

content: '第四个节点内容',

type: 'success',

},

]}

/>

);

API 参考TimeLine属性说明类型默认值className类名string-mode通过设置 mode 可以改变时间轴和内容的相对位置left|right|center|alternateleftstyle样式CSSProperties-dataSource时间轴数据源 v>=1.16.0，支持 content 属性及 TimeLine.Item 的所有属性array-TimeLine.Item属性说明类型默认值版本className类名string--color自定义的圆圈色值string--dot自定义时间轴点ReactNode--extra自定义辅助内容ReactNode--position自定义节点位置，可以覆盖 TimeLine 的模式选项left|right--style样式CSSProperties--time时间文本string--type当前圆圈的模式default|ongoing|success|warning|errordefault-onClick鼠标点击事件的回调(e: MouseEvent) => void-2.2.0AccessibilityARIA组件中时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API可以通过传入 aria-label 设置 TimeLine 组件的标签

创建服务现场

初步排除网络异常

技术测试异常

网络异常正在修复

设计变量设计系统

Semi UISemi D2CSemi DSMSemi TemplateSemi x Figma

Figma UIKitFigma IconsetFigma Plugin获取 Semi 动态

Semi 飞书群TwitterMediumDev.to小红书友情链接

RspackVisactor© 2021 - 2025 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号 Designed & Developed with love by Douyin FE & MED