0.2.3 • Published 6 years ago
react-tote-box v0.2.3
React Tote Box · 
NZ's React components library
Installation
React-tote-box requires React v16.3+, react-dom and react-transition-group
$ npm install react-tote-boxComponents
Modal
API
| Props | Description | Type | Default |
|---|---|---|---|
| title | Modal 标题 | String | "Modal Title" |
| visible | Modal 是否可见 | Boolean | false |
| animation | 动画展现方式 | String | "zoom" |
| onClose | 点击右上角叉后的回调 | Function | noop |
Usage
<Modal
title="Example"
visible={this.state.visible}
animation="flip"
onClose={() => this.setState({ visible: false })}
>
<p>some content...</p>
</Modal>Animate
API
| Props | Description | Type | Default |
|---|---|---|---|
| in | 在可见后开始动画 | Boolean | false |
| animation | 动画展现方式 | String | "fade" |
| duration | 动画展现时间 | Number | 400 |
| 其他属性 | 参考：react-transition-group |
Animations
| animation | |||
|---|---|---|---|
fade | fadeDown | fadeLeft | fadeRight |
fadeUp | |||
flip | flipX | flipY | |
rotate | rotateDownLeft | rotateDownRight | rotateUpLeft |
rotateUpRight | |||
zoom |
Usage
<Animate in={visible} animation="zoom" duration="600">
<div className="loading" />
</Animate>