Markup Examples

|

Simple SelectList

Africa America Asia Europe Oceania
Show Markup

                      

Grouped SelectList

Expression 1 Expression 2 Expression 3 Expression 4 Expression 5
Show Markup

                      

SelectList with Icons

Adjust Alert Alert-Add Alias Anchor
Show Markup

                      

SelectList with disabled Options

John Lennon George Harrison Paul McCartney Ringo Starr
Show Markup

                      

SelectList with multiple selection

Africa America Asia Europe Oceania
Show Markup

            

Instantiate with Class

Africa America Asia Europe Oceania
Show Markup

                      

Getting the selected item

The SelectList provides an attribute to get direct access to the selected item.

                        

No example content provided!

Responding to User Interaction

The following shows how to respond to user interaction when an item is selected in the Select component above.
                        
                        

Log

Coral.SelectList API

Constructor

JavaScript:

new Coral.SelectList() or document.createElement('coral-selectlist')

HTML Tag:

<coral-selectlist>

Extends

Mixes In

Sub-components

Instance Properties

instance.groups {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the Coral.SelectList.Group elements that the SelectList contains. This includes items nested inside groups. To manage items contained within a specific group, see Coral.SelectList.Group#items. See Coral.Collection for more details regarding collection APIs.

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.loading {Boolean}

Reflected
Whether items are being loaded for the SelectList. Toggling this merely shows or hides a loading indicator.
Default Value:
  • false
HTML Attribute:
  • loading

instance.multiple {Boolean}

Whether multiple items can be selected.
Default Value:
  • false
HTML Attribute:
  • multiple

instance.selectedItem {HTMLElement}

Readonly
Returns the first selected item in the selectionList. The value null is returned if no element is selected.

instance.selectedItems {Array.<HTMLElement>}

Readonly
Returns an Array containing the set selected items.

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-collection:add

Triggered when an item is added to the Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was added.
Inherited From:

coral-collection:remove

Triggered when an item is removed from a Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was removed.
Inherited From:

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-selectlist:change

Triggered when the selection changes or the user interacts with the list. For example, if something is already selected and the user clicks on it again, even it it does not cause the selection to change, a coral-selectlist:change event will be triggered so that components can identify that the user interacted with the SelectList.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail Object

Detail object.

Name Type Description
event.detail.oldSelection HTMLElement|Array.<HTMLElement> The old item selection. When Coral.SelectList#multiple, it includes an Array.
event.detail.selection HTMLElement|Array.<HTMLElement> The item selection. When Coral.SelectList#multiple, it includes an Array.

coral-selectlist:scrollbottom

Triggered when the user scrolls to near the bottom of the list. This can be useful for when additional items can be loaded asynchronously (i.e., infinite scrolling).
Callback Parameters:
Name Type Description
event Object Event object.

Coral.SelectList.Item API

Constructor

JavaScript:

new Coral.SelectList.Item() or document.createElement('coral-selectlist-item')

HTML Tag:

<coral-selectlist-item>

Extends

Mixes In

Instance Properties

instance.content {HTMLElement}

Readonly
The content element for the item.

instance.disabled {Boolean}

Reflected
Whether this item is disabled. When set to true, this will prevent every user interaction with the item. If disabled is set to true for a selected item it will be deselected.
Default Value:
  • false
HTML Attribute:
  • disabled

instance.selected {Boolean}

Reflected
Whether the item is selected. Selected cannot be set to true if the item is disabled.
Default Value:
  • false
HTML Attribute:
  • selected

instance.value {String}

Reflected
Value of the item. If not explicitly set, the value of Node.textContent is returned.
Default Value:
  • ""
HTML Attribute:
  • value

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

Coral.SelectList.Group API

Constructor

JavaScript:

new Coral.SelectList.Group() or document.createElement('coral-selectlist-group')

HTML Tag:

<coral-selectlist-group>

Extends

Instance Properties

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the Coral.SelectList.Item elements that the group contains. See Coral.Collection for more details regarding collection APIs.

instance.label {String}

Reflected
The label of the group. It reflects the label attribute to the DOM.
Default Value:
  • ""
HTML Attribute:
  • label

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: