Timeline 时间轴

基本用法

使用场景: 当有一系列信息需要从上至下按时间排列时, 需要有一条时间轴进行视觉上的串联，可以使用 Timeline 组件.

Step 1: Download

Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.

Step 2: Add content

Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.

Step 3: Customize styles

Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.

Ready!

<Timeline
  items={[
    {
      title: 'Step 1: Download',
      description:
          "Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.",
    },
    {
      title: 'Step 2: Add content',
      description:
          "Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.",
    },
    {
      title: 'Step 3: Customize styles',
       description:
          'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.',
    },
    {
      title: 'Ready!',
    },
  ]}
  defaultIcon='tabler:check'
/>

设置节点icon

Step 1: Download

Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.

Step 2: Add content

Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.

Step 3: Customize styles

Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.

Ready!

<Timeline
  items={[
    {
      title: 'Step 1: Download',
      description:
          "Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.",
      icon: 'tabler:package',
      classes
    },
    {
      title: 'Step 2: Add content',
      description:
          "Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.",
      icon: 'tabler:letter-case',
    },
    {
      title: 'Step 3: Customize styles',
       description:
          'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.',
      icon: 'tabler:paint',
    },
    {
      title: 'Ready!',
      icon: 'tabler:check',
    },
  ]}
/>

API

属性	说明	类型	默认值
items	配置项	Array	[]
defaultIcon	默认icon，当每项 item 没有设置icon时， defaultIcon生效	string	-
classes	组件样式	object

Timeline.items

属性	说明	类型	默认值
title	标题	string	-
description	描述信息	string	-
icon	该项对应的icon图标，如果不设置 icon，则使用 defaultIcon	string	-
classes	该项对应的样式{panel: 'max-w-xl', icon: 'text-xl', title: 'text-2xl', description: 'text-xl'}	object	-
callToAction	该项中<Button>组件的配置，继承自 Button 组件	object
image	该项中<Image>组件的配置，继承自 Image 组件	object

Timeline.classes

属性	说明	类型	默认值
container	Timeline 组件容器的样式	string	-
panel	-	string	-
title	作用于 Timeline 组件 每一项的 title 的样式	string	-
description	作用于 Timeline 组件 每一项的 description 的样式	string	-
icon	作用于 Timeline 组件 每一项的 description 的样式	string	-