0.4.0 • Published 3 years ago
@totebox/ui
安装
npm i @totebox/ui
确保你的项目中已经安装了以下依赖以及相应的版本：
npm i classnames@^2.2.0 react@^16.8.0 react-dom@^16.8.0 react-transition-group@^4.3.0
使用
import { Animate, Loading, Modal, /*other components...*/ } from '@totebox/ui'
组件 API
Animate
Props
animation
| animation | | | |
|---|
fade | fadeDown | fadeLeft | fadeRight |
fadeUp | | | |
flip | flipX | flipY | |
rotate | rotateDownLeft | rotateDownRight | rotateUpLeft |
rotateUpRight | | | |
zoom | | | |
Example
<Animate in={visible} animation="zoom" duration="600">
<div className="loading" />
</Animate>
Loading
Props
| Props | Description | Type | Default |
|---|
| visible | 组件显示/隐藏 | Boolean | false |
| 其他属性 | 参考：Animate | | |
Example
<Loading visible={loading} />
Modal
Props
| Props | Description | Type | Default |
|---|
| title | Modal 标题 | String | "Title" |
| visible | Modal 是否可见 | Boolean | false |
| animation | 动画展现方式 | String | "zoom" |
| onClose | 点击右上角叉后的回调 | Function | noop |
Example
const [modalVisible, setModalVisible] = useState(true);
<Modal
title="Example"
visible={modalVisible}
animation="flip"
onClose={() => setModalVisible(false)}
>
<p>Message...</p>
</Modal>
License
MIT © nicolaszhao