TaroifyReact UI

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

    Timeline.Item Props

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

    Timeline.Dot Props

    参数说明类型默认值
    variant圆点变体，可选值为 outlinedstringfilled
    color圆点颜色，可选值为 primary info success warning dangerstringdefault

    主题定制

    样式变量

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

    名称默认值描述
    --timeline-colorvar(--white)-
    --timeline-background-colorvar(--gray-5)-
    --timeline-border-colorvar(--white)-
    --timeline-border-width2px * $hd-
    --timeline-font-weightvar(--font-weight-bold)-
    --timeline-font-sizevar(--font-size-md)-
    --timeline-min-height70px * $hd-
    --timeline-content-padding0 16px * $hd-
    --timeline-connector-border-colorvar(--gray-5)-
    --timeline-connector-border-width2PX-
    --timeline-connector-border-stylesolid-
    --timeline-top-connector-border-colorvar(--timeline-connector-border-color)-
    --timeline-top-connector-border-widthvar(--timeline-connector-border-width)-
    --timeline-top-connector-border-stylevar(--timeline-connector-border-style)-
    --timeline-bottom-connector-border-colorvar(--timeline-connector-border-color)-
    --timeline-bottom-connector-border-widthvar(--timeline-connector-border-width)-
    --timeline-bottom-connector-border-stylevar(--timeline-connector-border-style)-
    --timeline-dot-size12px * $hd-
    --timeline-dot-margin6px * $hd 0-
    --timeline-dot-padding4PX-
    --timeline-dot-border-width2PX-
    --timeline-dot-default-colorvar(--gray-5)-
    --timeline-dot-primary-colorvar(--primary-color)-
    --timeline-dot-info-colorvar(--info-color)-
    --timeline-dot-success-colorvar(--success-color)-
    --timeline-dot-warning-colorvar(--warning-color)-
    --timeline-dot-danger-colorvar(--danger-color)-