Interact-Atom

React 项目的大屏组件库

组件介绍

柱状体-BarChart

import { BarChart } from 'interact-atom'

const App = () => {
  retrun <>
    <BarChart />
  </>
}

export default App;

参数说明

• width：柱状体宽度
• percent：柱状体高度百分比
• colors：柱状体颜色，支持渐变色，类型为数组
• text：顶部文字
• textSty：顶部文字样式

圆柱体-Cylinder

import { Cylinder } from 'interact-atom'

const App = () => {
  retrun <>
    <Cylinder />
  </>
}

export default App;

参数说明

• width：圆柱体宽度
• percent：圆柱体高度百分比
• colors：圆柱体颜色，支持渐变色，类型为数组
• text：顶部文字
• textSty：顶部文字样式

滚动列表-ScrollList

import { ScrollList } from 'interact-atom'

const App = () => {
  retrun <>
    <ScrollList
      datas={list}
      render={(info) => {
        return (<div style={{ background: info.css }}>{info.name}</div>);
      }}
    />
  </>
}

export default App;

参数说明

• datas：数据列表，需包含唯一键值 key
• render：元素加载函数，此函数会返回 datas 的数据项
• height：元素高度
• flip：元素消失时是否翻转（默认：false）
• duration：动画时长（默认：2000ms）
• interval：停顿间隔（默认：1000ms）

水平方向排序动画-HorizontalAnimate

import { HorizontalAnimate, BarChart } from 'interact-atom'

const App = () => {
  retrun <>
   <HorizontalAnimate
      datas={list}
      width={73}
      render={(item) => {
        return <BarChart
          percent={item.percent}
          colors={item.color}
        />;
      }}
    />
  </>
}

export default App;

参数说明

• datas：数据列表，需包含唯一键值 key
• render：元素加载函数，此函数会返回 datas 的数据项
• width：元素宽度
• duration：动画时长（默认：1000ms）