@beisen-phoenix/timeline

@beisen-phoenix/timeline

Usage no npm install needed!

<script type="module">
  import beisenPhoenixTimeline from 'https://cdn.skypack.dev/@beisen-phoenix/timeline';
</script>

README

时间轴组件

@beisen-phoenix/timeline

概述

本组件是个纯组件,根据传入的数据渲染出一个时间轴。

API

参数 说明 类型 默认值 是否必传
data 时间轴数据 Array [] Yes

示例代码

import React from 'react';
import Timeline from '@beisen-phoenix/timeline';
import data from './data.json';


export default function App() {
  return <Timeline data={data} />
}

说明

  • 本组件渲染格式不可配置,
  • 当前年份会被隐藏

数据格式

[
  {
    "year": 2016,
    "dates": [
      {
        "date": "88/88",
        "events": [
          {
            "commentType":3,
            "createTime": "88:88",
            "content": "发起了任务 带分布列表",
            "publishUser": "非非",
            "commentId": "xxx01"
          },
          {
            "commentType":3,
            "createTime": "13:20",
            "content": "发起了任务 带分布列表,例如任务有更多数据,提示\"没有数据了\"发起了任务 带分布列表,例如任务有更多数据,提示\"没有数据了\"发起了任务 带分布列表,例如任务有更多数据,提示\"没有数据了\"发起了任务 带分布列表,例如任务有更多数据,提示\"没有数据了\"",
            "publishUser": "斐斐",
            "commentId": "xxx02"
          }
        ]
      }      
    ]
  },
  {
    "year": 2017,
    "dates": [
      {
        "date": "01/17",
        "events": [
          {
            "commentType":3,
            "createTime": "13:21",
            "content": "发起了任务 带分布列表",
            "publishUser": "非非",
            "commentId": "xxx0xdf"
          }
        ]
      },
      {
        "date": "05/10",
        "events": [
          {
            "commentType":3,
            "createTime": "13:21",
            "content": "将任务名称 带分布列表 修改为 带分布列表,例如任务列表页",
            "publishUser": "非非",
            "commentId": "xxx01dfsf"
          },
          {
            "commentType":3,
            "createTime": "13:20",
            "content": "发起了任务 带分布列表,例如任务有更多数据,提示\"没有数据了\"",
            "publishUser": "斐斐",
            "commentId": "xxx02xfdfds"
          }
        ]
      }      
    ]
  },
  {
    "year": 2018,
    "dates": [
      {
        "date": "03/01",
        "events": [
          {
            "commentType":3,
            "createTime": "10:33",
            "content": "在任务下分解了任务 [假勤]",
            "publishUser": "海彬",
            "commentId": "xxx303"
          },
          {
            "commentType":3,
            "createTime": "10:34",
            "content": "完成了任务[假勤]",
            "publishUser": "李贺",
            "commentId": "xxx204"
          }
        ]
      }      
    ]
  }
]