Items
The Items
component uses content in a data object to render a list of Item
components.
It follows the Fragments pattern and returns its children without a wrapping element. This allows you to decide how you want to wrap your list of items.
The Items
component is used as a direct child of the List
component.
Props
Name | Required | Description |
---|---|---|
items |
check_box | An iterable that yields [key, item] pairs such as an ES2015 Map |
renderItem |
A render prop or HTML tagname string. | |
selectionModel |
A string corresponding to a selection model. |
Selection models
The selectionModel
currently accepts the following values:
- radio (default)
- checkbox
Example
import Items from '@magento/peregrine';
const data = {
s: { id: 's', value: 'Small' },
m: { id: 'm', value: 'Medium' },
l: { id: 'l', value: 'Large' }
};
<Items
items={Object.entries(data)}
renderItem='option'
selectionModel='checkbox'
/>