Timeline

Vertically displayed time flow information.

When to use

When a series of information needs to be arranged from top to bottom by time.
When a timeline is needed for visual connection.

Component Example

Component Properties

属性说明类型默认值

属性	说明	类型	默认值
animation	Whether to enable animation	boolean	true
dataSource	Used to configure timeline data	TimelineDataSource[]	`[ { title: { zh_CN: "Spring", en_US: "Spring", type: "i18n", }, time: "2021-03-10", }, { title: { zh_CN: "Summer", en_US: "Summer", type: "i18n", }, time: "2016-06-11", }, { title: { zh_CN: "Autumn", en_US: "Autumn", type: "i18n", }, time: "2016-09-09", }, { title: { zh_CN: "Winter", en_US: "Winter", type: "i18n", }, time: "2016-12-08", }, ]`
fold	Used to configure data folding	any[]	`[ { foldArea: [1, 2], foldShow: false, }, ]`

animation

Whether to enable animation

boolean

true

dataSource

Used to configure timeline data

TimelineDataSource[]

[
{
  title: {
    zh_CN: "Spring",
    en_US: "Spring",
    type: "i18n",
  },
  time: "2021-03-10",
},
{
  title: {
    zh_CN: "Summer",
    en_US: "Summer",
    type: "i18n",
  },
  time: "2016-06-11",
},
{
  title: {
    zh_CN: "Autumn",
    en_US: "Autumn",
    type: "i18n",
  },
  time: "2016-09-09",
},
{
  title: {
    zh_CN: "Winter",
    en_US: "Winter",
    type: "i18n",
  },
  time: "2016-12-08",
},
]

fold

Used to configure data folding

any[]

[
{
  foldArea: [1, 2],
  foldShow: false,
},
]

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.

Is this document helpful?

When to use​

Component Example​

Component Properties​

When to use

Component Example

Component Properties