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
childComponent
Component

Component type to repeat. This can be a React component or a string describing a DOM node (e.g. 'div')

children
ArrayStringArrayObject

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 as children). If an array of objects is provided, each object will be spread onto the generated childComponent with no interpretation. You'll be responsible for setting properties like disabled, className, and setting the content using children.

NOTE: When providing an array of objects be sure a unique key is assigned to each item. Read about keys for more information.

childProp
String

The property on each childComponent that receives the data in children

Default: 'children'
childSelect
String

The name of the event that triggers activation.

Default: 'onClick'
indexProp
String

The property on each childComponent that receives the index of the item

Default: 'data-index'
itemProps
Object

An object containing properties to be passed to each child.

onSelect
Function

Callback method to be invoked when an item is activated.

select
String

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'
selected
NumberArray

The index(es) of the currently activated item.

selectedProp
String

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';
ArrayBooleanFunctionModuleNumberObjectString