Skip to content

Commit 003310f

Browse files
authored
README.md: up +add examples
1 parent 5a393e4 commit 003310f

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
@@ -74,8 +74,8 @@
7474
| Data Display | `<Avatar />` ||
7575
| Data Display | `<Badge />` ||
7676
| Data Display | `<Table />` + Cell/Column/Header ||
77-
| Data Display | `<Tree />` | 🛑 |
78-
| Data Display | `<CheckTree />` | 🛑 |
77+
| Data Display | `<Tree />` | |
78+
| Data Display | `<CheckTree />` | |
7979
| Data Display | `<Panel />` ||
8080
| Data Display | `<Timeline />` ||
8181
| Data Display | `<Tag />;<TagGroup/>` ||
@@ -86,7 +86,7 @@
8686
| Layout | `<FlexboxGrid />` ||
8787
| Layout | `<Container />` ||
8888
| :-: | ------------------------------------| :-: |
89-
| Utils | `<Animation />` | 🛑 |
89+
| Utils | `<Animation />` | |
9090
| Utils | `<Portal />` ||
9191

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

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

160182
**Modal**
161183

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

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

199232
**Example**
200233

0 commit comments

Comments
 (0)