List widget
Overview
Provides a way to move items, typically a list, from one content section to another. The content can be moved using buttons and links.
The list widget source file is lib/web/mage/list.js.
Initialize the list widget
For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.
Options
The list widget has the following options:
- addButton
- destinationSelector
- itemCount
- itemIndex
- maxItems
- maxItemsAlert
- removeButton
- template
- templateClass
- templateWrapper
Detailed description of each option follows.
addButton
Selector for the element used for item adding.
Type: String
Default value: [data-button=remove]
destinationSelector
Content destination selector.
Type: String
Default value: [data-role=container]
itemCount
Number of total items.
Type: Integer
Default value: 0
itemIndex
Number of the current item.
Type: Integer
Default value: 0
maxItems
Number of list items that can be added to the destination.
Type: Integer
Default value: null
maxItemsAlert
Alert message displayed when maximum limit is reached.
Type: String
Default value: [data-button=remove]
removeButton
Selector for the element used for item removing.
Type: String
Default value: [data-button=remove]
template
Template for the added item.
Type: String
Default value: [data-role=item]
templateClass
Class attached to the template wrapper.
Type: String
Default value: [data-role=container]
templateWrapper
Element holding the template.
Type: String
Default value: null
Methods
The list widget has the following methods:
addItem()
Adds item to the list in the specified order (defined by the index parameter).
handleAdd()
Adds item to the list.
checkLimit()
If the maxItems option is set, hides or displays the Add button.
removeItem()
Removes an item from the list.