Interact-Atom

React 项目的大屏组件库

组件介绍

$3

``jsx
import { BarChart } from 'interact-atom'

const App = () => {
retrun <>


}

export default App;
`

#### 参数说明

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

$3

`jsx
import { Cylinder } from 'interact-atom'

const App = () => {
retrun <>


}

export default App;
`

#### 参数说明

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

$3

`jsx
import { ScrollList } from 'interact-atom'

const App = () => {
retrun <>
datas={list}
render={(info) => {
return (

export default App;
`

#### 参数说明

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

$3

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

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

}

export default App;
``

#### 参数说明

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