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