React Suite 时间轴组件

简介

React Suite 时间轴组件是一款基于 React 的可自定义的时间轴组件，支持横向和纵向展示，可自定义图标、颜色、状态等。适用于展示历史事件、项目进度或者工作流程等。

功能特点

• 支持横向和纵向展示
• 支持自定义图标、颜色、状态等
• 支持自定义时间轴节点的内容

使用方法

1. 安装组件库

   npm install rsuite
   

2. 引入组件

   import { Timeline } from 'rsuite';
   import 'rsuite/dist/styles/rsuite-default.css'; // 引入默认样式
   

3. 使用组件

   const data = [
     {
       time: '2022-01-01',
       title: '事件1',
       description: '事件1的描述'
     },
     {
       time: '2022-01-02',
       title: '事件2',
       description: '事件2的描述'
     }
   ];
   
   <Timeline data={data} />
   

API

Timeline

| 属性 | 类型 | 默认值 | 说明 | | ----------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- | | data | Array | [] | 数据源，每个元素格式为 { time: string, title: string, description?: string, status?: 'wait' \| 'process' \| 'finish' } | | placement | 'vertical' | 'horizontal' | 'vertical' | 时间轴的展示方式 | | className | string | undefined | undefined | 自定义类名 | | style | React.CSSProperties | undefined | undefined | 自定义样式 | | dot | (item: Record) => React.ReactNode | undefined | undefined | 自定义时间轴节点的图标 | | onItemClick | (item: Record, event: React.MouseEvent) => void | undefined | 点击时间轴节点时触发的回调函数 | | onItemRemove | (item: Record) => void | undefined | 点击时间轴节点上的删除按钮时触发的回调函数 |

结束语

React Suite 时间轴组件是一款功能强大、易于使用、高度可自定义的组件。希望对开发者们有所帮助，也欢迎大家提出宝贵意见和建议。