|
74 | 74 | | Data Display | `<Avatar />` | ✅ | |
75 | 75 | | Data Display | `<Badge />` | ✅ | |
76 | 76 | | Data Display | `<Table />` + Cell/Column/Header | ✅ | |
77 | | -| Data Display | `<Tree />` | 🛑 | |
78 | | -| Data Display | `<CheckTree />` | 🛑 | |
| 77 | +| Data Display | `<Tree />` | ✅ | |
| 78 | +| Data Display | `<CheckTree />` | ✅ | |
79 | 79 | | Data Display | `<Panel />` | ✅ | |
80 | 80 | | Data Display | `<Timeline />` | ✅ | |
81 | 81 | | Data Display | `<Tag />;<TagGroup/>` | ✅ | |
|
86 | 86 | | Layout | `<FlexboxGrid />` | ✅ | |
87 | 87 | | Layout | `<Container />` | ✅ | |
88 | 88 | | :-: | ------------------------------------| :-: | |
89 | | -| Utils | `<Animation />` | 🛑 | |
| 89 | +| Utils | `<Animation />` | ✅ | |
90 | 90 | | Utils | `<Portal />` | ✅ | |
91 | 91 |
|
92 | 92 | ## Installation |
@@ -156,6 +156,28 @@ All bindings are in `RsuiteUi` namespace, let's try! Some **examples** |
156 | 156 | <RsuiteUi.CheckPicker data={[|item|]]} /> |
157 | 157 | ``` |
158 | 158 |
|
| 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 | + |
159 | 181 |
|
160 | 182 | **Modal** |
161 | 183 |
|
@@ -194,7 +216,18 @@ All bindings are in `RsuiteUi` namespace, let's try! Some **examples** |
194 | 216 | Notification._open(...); // instead Notification.open() |
195 | 217 | ``` |
196 | 218 |
|
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 |
198 | 231 |
|
199 | 232 | **Example** |
200 | 233 |
|
|
0 commit comments