List
This component is used to render ordered and unordered lists.
Example
Live Editor
<List ordered> <li> apples and <span style={{ color: 'green' }}>green apples</span> </li> <li>citrus</li> <li> melons <a url="#">fruits</a> </li> </List>
Result
Loading...
Usage Rules
Do
- Use
List
as the parent wrapper - Wrap all direct children on
<li>
tags - Add any necessary markup inside the
<li>
tags
Don't
- Nest any other html tag as direct child of
List
Variants
Extended
The list can also have the extended
prop. In this case the space between items increases.
Live Editor
<List extended> <li> {' '} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> <li> Ullamco laboris nisi ut aliquip</li> <li> {' '} Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{' '} </li> </List>
Result
Loading...
Live Editor
<List ordered extended> <li> {' '} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> <li> Ullamco laboris nisi ut aliquip</li> <li> {' '} Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{' '} </li> </List>
Result
Loading...
Kind
We have two kinds of lists, ordered and unordered. If the prop ordered
is not set, it defaults to unordered
.
Live Editor
<List ordered> <li>apples</li> <li>citrus</li> <li>melons</li> </List>
Result
Loading...
Live Editor
<List> <li>apples</li> <li>citrus</li> <li>melons</li> </List>
Result
Loading...
Nested
List
component supports nesting. You can mix ordered and unordered lists if neccesary.
Live Editor
<List ordered> <li>apples</li> <li>citrus</li> <li>melons</li> <List ordered> <li>oranges</li> <li>grapefruits</li> </List> </List>
Result
Loading...
Different levels will have different bullets in the case of unordered.
Live Editor
<List> <li>apples</li> <li>citrus</li> <li>melons</li> <List> <li>oranges</li> <li>grapefruits</li> </List> </List>
Result
Loading...
Props
Name | Type | Default |
---|---|---|
ordered Changes to the ordered type of list using an <ol> |
| false |
extended Adds a wider space between <li> elements |
| false |
children The content of the List |
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |