• Vant React

Timeline 时间轴

介绍

按时间顺序来展示了一系列的事件。

引入

import { Timeline } from "@taroify/core"

代码演示

基础用法

一个基本的时间轴,显示事件列表。

function RightTimeline() {
  return (
    <Timeline position="right">
      <Timeline.Item>Eat</Timeline.Item>
      <Timeline.Item>Code</Timeline.Item>
      <Timeline.Item>Sleep</Timeline.Item>
    </Timeline>
  )
}

左侧用法

时间轴的主要内容可以被放置在相对时间轴的左侧。

function LeftTimeline() {
  return (
    <Timeline position="left">
      <Timeline.Item>Eat</Timeline.Item>
      <Timeline.Item>Code</Timeline.Item>
      <Timeline.Item>Sleep</Timeline.Item>
    </Timeline>
  )
}

交替用法

时间轴可以显示在事件的两侧。

function AlternateTimeline() {
  return (
    <Timeline position="alternate">
      <Timeline.Item>Eat</Timeline.Item>
      <Timeline.Item>Code</Timeline.Item>
      <Timeline.Item>Sleep</Timeline.Item>
      <Timeline.Item>Repeat</Timeline.Item>
    </Timeline>
  )
}

描边用法

可以自定义圆点的变种和颜色。

function OutlinedTimeline() {
  return (
    <Timeline position="alternate">
      <Timeline.Item dot={{ variant: "outlined" }}>Eat</Timeline.Item>
      <Timeline.Item dot={{ variant: "outlined", color: "primary" }}>Code</Timeline.Item>
      <Timeline.Item dot={{ variant: "outlined", color: "danger" }}>Sleep</Timeline.Item>
      <Timeline.Item dot={{ variant: "outlined" }}>Repeat</Timeline.Item>
    </Timeline>
  )
}

自定义用法

可以自定义整个时间轴。

function CustomTimeline() {
  return (
    <Timeline>
      <Timeline.Item>
        <Timeline.Content align="center">9:30 am</Timeline.Content>
        <Timeline.Separator>
          <Timeline.Connector />
          <Timeline.Dot>
            <FireOutlined size="24" />
          </Timeline.Dot>
          <Timeline.Connector />
        </Timeline.Separator>
        <Timeline.Content direction="column" align="start">
          <View className="timeline-title">Eat</View>
          <View>Because you need strength</View>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Content direction="column" align="end">
          <View className="timeline-title">Code</View>
          <View>awesome</View>
        </Timeline.Content>
        <Timeline.Separator>
          <Timeline.Connector />
          <Timeline.Dot color="primary">
            <StarOutlined size="24" />
          </Timeline.Dot>
          <Timeline.Connector />
        </Timeline.Separator>
        <Timeline.Content align="center">10:00 am</Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Content />
        <Timeline.Separator>
          <Timeline.Connector />
          <Timeline.Dot variant="outlined" color="primary">
            <GemOutlined size="24" />
          </Timeline.Dot>
          <Timeline.Connector />
        </Timeline.Separator>
        <Timeline.Content direction="column" align="start">
          <View className="timeline-title">Sleep</View>
          <View>Because you need rest</View>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Content direction="column" align="end">
          <View className="timeline-title">Repeat</View>
          <View>you love!</View>
        </Timeline.Content>
        <Timeline.Separator>
          <Timeline.Connector />
          <Timeline.Dot color="danger">
            <SmileOutlined size="24" />
          </Timeline.Dot>
          <Timeline.Connector />
        </Timeline.Separator>
      </Timeline.Item>
    </Timeline>
  )
}
.timeline-title {
  font-size: 24px * 2;
}

API

Timeline Props

参数 说明 类型 默认值
position 位置布局,可选值为 left right alternate alternate-reverse string -

Timeline.Item Props

参数 说明 类型 默认值
dot 圆点 ReactNode | TimelineDotProps -

Timeline.Dot Props

参数 说明 类型 默认值
variant 圆点变体,可选值为 outlined string filled
color 圆点颜色,可选值为 primary info success warning danger string default

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—timeline-color var(—white) -
—timeline-background-color var(—gray-5) -
—timeline-border-color var(—white) -
—timeline-border-width 2px * $hd -
—timeline-font-weight var(—font-weight-bold) -
—timeline-font-size var(—font-size-md) -
—timeline-min-height 70px * $hd -
—timeline-content-padding 0 16px * $hd -
—timeline-connector-border-color var(—gray-5) -
—timeline-connector-border-width 2PX -
—timeline-connector-border-style solid -
—timeline-top-connector-border-color var(—timeline-connector-border-color) -
—timeline-top-connector-border-width var(—timeline-connector-border-width) -
—timeline-top-connector-border-style var(—timeline-connector-border-style) -
—timeline-bottom-connector-border-color var(—timeline-connector-border-color) -
—timeline-bottom-connector-border-width var(—timeline-connector-border-width) -
—timeline-bottom-connector-border-style var(—timeline-connector-border-style) -
—timeline-dot-size 12px * $hd -
—timeline-dot-margin 6px * $hd 0 -
—timeline-dot-padding 4PX -
—timeline-dot-border-width 2PX -
—timeline-dot-default-color var(—gray-5) -
—timeline-dot-primary-color var(—primary-color) -
—timeline-dot-info-color var(—info-color) -
—timeline-dot-success-color var(—success-color) -
—timeline-dot-warning-color var(—warning-color) -
—timeline-dot-danger-color var(—danger-color) -