The TabList implements the Collection API as a way to manipulate the items. It provides add(), remove(), clear(), and getAll(), as well as their corresponding events to keep track of the items. Check Coral.Collection for more information.

add(item, insertBefore)

The following code adds an item using the JavaScript constructor. After an item is added a coral-collection:add event will be triggered.

var tabList = new Coral.TabList();
var item = new Coral.Tab();
tabList.items.add(item);

Add also allows using an object that represents the item. All values will be set using the multiple value set provided by the Coral.Component class.

var tabList = new Coral.TabList();
tabList.items.add({
  label: {
    innerHTML: 'Tab'
  },
  icon: '',
  invalid: false,
  disabled: false,
  selected: false
});

remove(item)

Item removal is done in a similar fashion. After any removal, the TabList will trigger a coral-collection:remove event.

tabList.items.remove(item);

Coral.TabList API

Constructor

JavaScript:

new Coral.TabList() or document.createElement('coral-tablist')

HTML Tag:

<coral-tablist>

Extends

Mixes In

Static Properties

Coral.TabList.orientation {String}

TabList orientations.

Properties:

Name Type Value Description
HORIZONTAL String horizontal Horizontal TabList, this is the default value.
VERTICAL String vertical Vertical TabList.

Coral.TabList.size {String}

Enumeration representing the TabList size.

Properties:

Name Type Value Description
MEDIUM String M A medium-sized tablist. This is the default.
LARGE String L A large-sized tablist, typically used for headers.

Instance Properties

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.orientation {Coral.TabList.orientation}

Orientation of the TabList.
Default Value:
  • Coral.TabList.orientation.HORIZONTAL
HTML Attribute:
  • orientation

instance.selectedItem {HTMLElement}

Readonly
The selected item in the TabList.

instance.size {Coral.TabList.size}

The size of the TabList. It accepts both lower and upper case sizes. Currently only "M" (the default) and "L" are available.
Default Value:
  • Coral.TabList.size.MEDIUM
HTML Attribute:
  • size

instance.target {HTMLElement | String}

The target component that will be linked to the TabList. It accepts either a CSS selector or a DOM element. If a CSS Selector is provided, the first matching element will be used. Items will be selected based on the index. If both target and Coral.Tab#target are set, the second will have higher priority.
Default Value:
  • null
HTML Attribute:
  • target

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:hide

Triggerred after the component is hidden with Coral.Component#hide.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-tablist:change

Triggered when the selected TabList item has changed.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.selection HTMLElement The newly selected TabList item.
event.detail.oldSelection HTMLElement The previously selected TabList item.

Coral.Tab API

Constructor

JavaScript:

new Coral.Tab() or document.createElement('coral-tab')

HTML Tag:

<coral-tab>

Extends

Mixes In

Sub-components

Instance Properties

instance.disabled {Boolean}

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

instance.icon {String}

Specifies the name of the icon used inside the Tab. See Coral.Icon for valid icon names.
Default Value:
  • ""
HTML Attribute:
  • icon
See:

instance.invalid {Boolean}

Reflected
Whether the current Tab is invalid.
Default Value:
  • false
HTML Attribute:
  • invalid

instance.label {HTMLElement}

The Tab's label element.

instance.selected {Boolean}

Whether the Tab is selected. When true, the Tab will appear as the active element in the TabList. The Tab must be a child of a TabList before this property is set to true. This property cannot be programmatically set to false.
Default Value:
  • false
HTML Attribute:
  • selected

instance.target {HTMLElement | String}

The target element that will be selected when this Tab is selected. It accepts a CSS selector or a DOM element. If a CSS Selector is provided, the first matching element will be used.
Default Value:
  • null
HTML Attribute:
  • target

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:hide

Triggerred after the component is hidden with Coral.Component#hide.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: