Skip to content

Commit 88394ec

Browse files
committed
2 parents 83ab2b1 + 003310f commit 88394ec

File tree

1 file changed

+37
-4
lines changed

1 file changed

+37
-4
lines changed

README.md

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@
7575
| Data Display | `<Avatar />` ||
7676
| Data Display | `<Badge />` ||
7777
| Data Display | `<Table />` + Cell/Column/Header ||
78-
| Data Display | `<Tree />` | 🛑 |
79-
| Data Display | `<CheckTree />` | 🛑 |
78+
| Data Display | `<Tree />` | |
79+
| Data Display | `<CheckTree />` | |
8080
| Data Display | `<Panel />` ||
8181
| Data Display | `<Timeline />` ||
8282
| Data Display | `<Tag />;<TagGroup/>` ||
@@ -87,7 +87,7 @@
8787
| Layout | `<FlexboxGrid />` ||
8888
| Layout | `<Container />` ||
8989
| :-: | ------------------------------------| :-: |
90-
| Utils | `<Animation />` | 🛑 |
90+
| Utils | `<Animation />` | |
9191
| Utils | `<Portal />` ||
9292

9393
## Installation
@@ -157,6 +157,28 @@ All bindings are in `RsuiteUi` namespace, let's try! Some **examples**
157157
<RsuiteUi.CheckPicker data={[|item|]]} />
158158
```
159159

160+
**Animation**
161+
162+
```reason
163+
let (isVisible, setVisibility) = React.useState(() => false);
164+
165+
React.useEffect0(() => {
166+
Js.Global.setTimeout(() => {
167+
setVisibility(_ => true);
168+
}, 200);
169+
None
170+
});
171+
172+
<RsuiteUi.Animation.Bounce
173+
_in={isVisible}
174+
>
175+
<div>
176+
{React.string("An")}
177+
</div>
178+
</RsuiteUi.Animation.Bounce>
179+
```
180+
181+
160182

161183
**Modal**
162184

@@ -195,7 +217,18 @@ All bindings are in `RsuiteUi` namespace, let's try! Some **examples**
195217
Notification._open(...); // instead Notification.open()
196218
```
197219

198-
**II**. Similar situation with `<FlexboxGrid />`; Sometimes we would be to use prop `justify` with **end** value, but we should use **end_** instead
220+
**II**. **_in** instead **in** prop
221+
222+
```reason
223+
<RsuiteUi.Animation.Bounce _in={isVisible} />
224+
225+
<RsuiteUi.Animation.Transition _in={isVisible} />
226+
227+
<RsuiteUi.Animation.Slide _in={isVisible} />
228+
```
229+
230+
231+
**III**. Similar situation with `<FlexboxGrid />`; Sometimes we would be to use prop `justify` with **end** value, but we should use **end_** instead
199232

200233
**Example**
201234

0 commit comments

Comments
 (0)