Reference Source
import {Collection} from '@adobe/coral-spectrum'
public class | source

Collection

Direct Subclass:

SelectableCollection

Collection provides a standardized way to manipulate items in a component.

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

Number of items inside the Collection.

Method Summary

Public Methods
public

add(item: HTMLElement | Object, insertBefore: HTMLElement): HTMLElement

Adds an item to the Collection.

public

Removes all the items from the Collection.

public

Returns the first item of the collection.

public

Returns an array with all the items inside the Collection.

public

Returns the last item of the collection.

public

Removes the given item from the Collection.

Public Constructors

public constructor() source

Params:

NameTypeAttributeDescription
options.host HTMLElement

The element that hosts the collection.

options.itemTagName String

The tag name of the elements that constitute a collection item.

options.itemBaseTagName String

The optional base tag name of the elements that constitute a collection item. This is required for elements that extend native elements, like Button.

options.itemSelector String
  • optional

Optional, derived from itemTagName and itemBaseTagName by default. Used to query the host element for its collection items.

options.container HTMLElement
  • optional

Optional element that wraps the collection. Defines where the new items will be added when add method is called. Is the same as options.host by default.

options.filter CollectionFilter
  • optional

Optional function used to filter the results.

options.onItemAdded CollectionOnItemAdded
  • optional

Function called once an item is added to the DOM. If the Collection has been configured to handle the items automatically, the callback will be called once the collection detects that the item has been added to the DOM and not synchronously with add().

options.onItemRemoved CollectionOnItemRemoved
  • optional

Function called once an item is removed from the DOM. If the Collection has been configured to handle the items automatically, the callback will be called once the collection detects that the item has been removed from the DOM not synchronously with add().

options.onCollectionChange CollectionOnChange
  • optional

Function called after there has been a change in the collection. This allows components to handle state changes after an item(s) has been added or removed. This callback will only be called if the Collection is configured to handle the items automatically. is true.

Public Members

public length: Number source

Number of items inside the Collection.

  • 0 by default.

Public Methods

public add(item: HTMLElement | Object, insertBefore: HTMLElement): HTMLElement source

Adds an item to the Collection. The item can be either a HTMLElement or an Object with the item properties. If the index is not provided the element appended to the end. If options.onItemAdded was provided, it will be called after the element is added from the DOM.

Params:

NameTypeAttributeDescription
item HTMLElement | Object

The item to add to the Collection.

insertBefore HTMLElement
  • optional

Existing item used as a reference to insert the new item before. If the value is null, then the new item will be added at the end.

Return:

HTMLElement

the item added.

Emit:

coral-collection:add

public clear(): Array<HTMLElement> source

Removes all the items from the Collection.

Return:

Array<HTMLElement>

an Array with all the removed items.

public first(): HTMLElement source

Returns the first item of the collection.

Return:

HTMLElement (nullable: true)

the first item of the collection.

public getAll(): Array<HTMLElement> source

Returns an array with all the items inside the Collection. Each element is of type HTMLElement.

Return:

Array<HTMLElement>

an Array with all the items inside the collection.

public last(): HTMLElement source

Returns the last item of the collection.

Return:

HTMLElement (nullable: true)

the last item of the collection.

public remove(item: HTMLElement): HTMLElement source

Removes the given item from the Collection. If options.onItemRemoved was provided, it will be called after the element is removed from the DOM.

Params:

NameTypeAttributeDescription
item HTMLElement

The item to add to the Collection.

Return:

HTMLElement

the item removed.

Emit:

coral-collection:remove