@@ -19,9 +19,8 @@ Demo: https://trendmicro-frontend.github.io/react-grid-system
19
19
``` js
20
20
import {
21
21
Provider as GridSystemProvider ,
22
- Container ,
23
- Row ,
24
- Col
22
+ Container , Row , Col ,
23
+ Visible , Hidden
25
24
} from ' @trendmicro/react-grid-system' ;
26
25
27
26
// Be sure to include styles at some point, probably during your bootstraping
@@ -41,20 +40,18 @@ components/
41
40
``` jsx
42
41
import ' @trendmicro/react-grid-system/dist/react-grid-system.css' ;
43
42
export {
44
- Provider ,
45
- Container ,
46
- Row ,
47
- Col
43
+ Provider ,
44
+ Container , Row , Col ,
45
+ Visible , Hidden
48
46
} from ' @trendmicro/react-grid-system' ;
49
47
```
50
48
51
49
Then, import components like below:
52
50
``` jsx
53
51
import {
54
- Provider as GridSystemProvider ,
55
- Container ,
56
- Row ,
57
- Col
52
+ Provider as GridSystemProvider ,
53
+ Container , Row , Col ,
54
+ Visible , Hidden
58
55
} from ' ./components/GridSystem' ;
59
56
```
60
57
@@ -106,7 +103,7 @@ You can wrap `<Container />`, `<Row />`, and `<Col />` in `<Provider />` to pass
106
103
< / Provider>
107
104
```
108
105
109
- ### Visible Component
106
+ ### Visible
110
107
111
108
``` jsx
112
109
< Visible xs>
@@ -129,7 +126,7 @@ You can wrap `<Container />`, `<Row />`, and `<Col />` in `<Provider />` to pass
129
126
< / Visible>
130
127
```
131
128
132
- ### Hidden Component
129
+ ### Hidden
133
130
134
131
``` jsx
135
132
< Hidden xs sm>
@@ -193,6 +190,30 @@ offset | { xs, sm, md, lg, xl, xxl } | | The offset of this column for all scree
193
190
pull | { xs, sm, md, lg, xl, xxl } | | The amount this column is pulled to the left for all screen classes.
194
191
push | { xs, sm, md, lg, xl, xxl } | | The amount this column is pushed to the right for all screen classes.
195
192
193
+ #### Visible
194
+
195
+ Name | Type | Default | Description
196
+ :--- | :--- | :------ | :----------
197
+ xs | Boolean | false | Visible on extra small devices.
198
+ sm | Boolean | false | Visible on small devices.
199
+ md | Boolean | false | Visible on medimum devices.
200
+ lg | Boolean | false | Visible on large devices.
201
+ xl | Boolean | false | Visible on extra large devices.
202
+ xxl | Boolean | false | Visible on double extra large devices.
203
+ onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
204
+
205
+ #### Hidden
206
+
207
+ Name | Type | Default | Description
208
+ :--- | :--- | :------ | :----------
209
+ xs | Boolean | false | Hidden on extra small devices.
210
+ sm | Boolean | false | Hidden on small devices.
211
+ md | Boolean | false | Hidden on medimum devices.
212
+ lg | Boolean | false | Hidden on large devices.
213
+ xl | Boolean | false | Hidden on extra large devices.
214
+ xxl | Boolean | false | Hidden on double extra large devices.
215
+ onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
216
+
196
217
## License
197
218
198
219
MIT
0 commit comments