ui/ Group
Provides a component that renders a group of components given a set of data.
import Group from '@enact/ui/Group';
Members
GroupComponent
A component that supports selection of its child items via configurable properties and events.
Selected item is managed by ui/Changeable.Changeable.
import Group from '@enact/ui/Group';
Properties
Component type to repeat. This can be a React component or a string describing a DOM node (e.g.
'div'
)An array of data to be mapped onto the
childComponent
.This supports two data types. If an array of strings is provided, the strings will be used in the generated
childComponent
as the content (i.e. passed aschildren
). If an array of objects is provided, each object will be spread onto the generatedchildComponent
with no interpretation. You'll be responsible for setting properties likedisabled
,className
, and setting the content usingchildren
.NOTE: When providing an array of objects be sure a unique
key
is assigned to each item. Read about keys for more information.The property on each
childComponent
that receives the data inchildren
Default: 'children'The name of the event that triggers activation.
Default: 'onClick'The property on each
childComponent
that receives the index of the itemDefault: 'data-index'An object containing properties to be passed to each child.
Callback method to be invoked when an item is activated.
Selection mode for the group
single
- Allows for 0 or 1 item to be selected. The selected item may be deselected.radio
- Allows for 0 or 1 item to be selected. The selected item may only be deselected by selecting another item.multiple
- Allows 0 to n items to be selected. Each item may be selected or deselected.
Default: 'single'The index(es) of the currently activated item.
The name of the DOM property that represents the selected state.
Default: 'data-selected'
GroupBaseComponent
A stateless component that supports selection of its child items via configurable properties and events.
import {GroupBase} from '@enact/ui/Group';