UNPKG

@linkdesign/screen

Version:

屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏

70 lines (47 loc) 1.9 kB
# 翻牌器 CountUp ## 使用场景 翻牌器 ## 预览 ![标题 Title](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1589188372519-e15af9ae-d5f3-44e8-8d2c-7e77041f105b.png) ## 演示 <!--before-content--> ## 基础用法 ```js import { Text, config } from '@linkdesign/screen'; const { CountUp } = Text; const { _cssPrefix } = config; const header = { backgroundColor: "#1f3b6d", display: "flex", alignItem: "center", padding: "0 24px", }; class App extends React.Component { render() { return ( <div data-theme="dark" style={header} className={`${_cssPrefix}main-body`}> <CountUp className="indicator" endVal={500.123} decimalPlaces={3} duration={2.75} /> </div> ); } } ReactDOM.render(<App />); ``` <!--after-content--> ### API | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | --------------------------------- | ------------ | ---- | --------------------------------------- | ---------------------------------------------------- | ------------ | | className | 类名 | N | String | - | | | style | 样式 | N | Object | - | | | endVal | 目标值 | Y | Number | 0 | | | fromPreserveVal | 是否以上一个结束数字开始下次的动画 | N | Boolean | False | | | delay | 开始延迟时间(单位:s) | N | Number | 0 | | | redraw | 是否重画 | N | Boolean | false | | | ... | | | | | | ## TODO List - [ ] ...