Taroify

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)	-