abc-timeline

0.0.1 • Public • Published

时间线组件

提供时间线数据展示,支持自定义时间节点

适用范围

适合需要按照时间先后顺序展示数据的场景

代码演示

<TimeLine
    data={MOCK_DATA.data}
    limit={5}
    onClickItem={(data) => {}}
    timeItem={(props) => {
        let {data = {}} = props;
        let url = data.url;
        return (
            <div className={"analyzer-timeline"}>
                <p className={"timeline-title"}>
                    <a href={url} target="_blank" title={data.title || "--"} >{data.title || "--"}</a>
                </p>
                <p className={"timeline-bottom"}>
                    <Icon className={"timeline-bottom-icon"} 
                        type={data.type === 'wechat' ? 'wechat' : 'profile'}/>
                    <span className={"abc-timeline-bottom-text"}>{data.source || "--"}</span>
                    <span className={"abc-timeline-bottom-text"}>{data.time ? moment(data.time).format("YYYY/MM/DD") : "--"}</span>
                </p>
            </div>
        )
    }} />

API

参数 说明 类型 默认值
data 时间线数据 array --
limit 限制展示的节点数 number --
onClickItem 点击节点事件 function --
timeItem 自定义时间节点 element --

Readme

Keywords

none

Package Sidebar

Install

npm i abc-timeline

Weekly Downloads

3

Version

0.0.1

License

none

Unpacked Size

197 kB

Total Files

41

Last publish

Collaborators

  • ywwu.abcft