indoqa-rebass-components
Advanced tools
Comparing version 0.1.1 to 0.1.2
{ | ||
"name": "indoqa-rebass-components", | ||
"version": "0.1.1", | ||
"version": "0.1.2", | ||
"main": "./dist/indoqa-rebass-components.min.js", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -7,1 +7,36 @@ # Indoqa Rebass Components | ||
* List/ListItem: Ordered and unordered lists with default padding/margin settings and configurable listStyleType. | ||
## Example | ||
```javascript | ||
import React from 'react' | ||
import {Space} from 'rebass' | ||
import {Div, List, ListItem} from 'indoqa-rebass-components' | ||
const ListExample = () => ( | ||
<Div> | ||
<List> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
<Space y={1} /> | ||
<List itemType="circle"> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
<Space y={1} /> | ||
<List ordered> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
</Div> | ||
) | ||
export default ListExample | ||
``` |
@@ -9,28 +9,22 @@ import React from 'react' | ||
<Div> | ||
<Div> | ||
<List> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
</Div> | ||
<List> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
<Space y={1} /> | ||
<Div> | ||
<List itemType="circle"> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
</Div> | ||
<List itemType="circle"> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
<Space y={1} /> | ||
<Div> | ||
<List ordered> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
</Div> | ||
<List ordered> | ||
<ListItem> item 1 </ListItem> | ||
<ListItem> item 2 </ListItem> | ||
<ListItem> item 3 </ListItem> | ||
<ListItem> item 4 </ListItem> | ||
</List> | ||
</Div> | ||
@@ -37,0 +31,0 @@ ) |
33167
42
131