Coral.TabView

Current Version: 1.1.6
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Related Components: Coral.TabList, Coral.PanelStack
Github: @coralui/coralui-component-tabview

Using a TabView

A Coral.TabView is the wrapping container used to create a tabbed UI element. This is intended to be used with a Coral.TabList and a Coral.PanelStack to create the typical 'Tabs' pattern.

Markup Example

Here is an example of how create tabs in CoralUI. This requires a Coral.TabView container, which holds a Coral.TabList and a Coral.PanelStack.

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Content
Show Markup 
<coral-tabview>
  <coral-tablist target="coral-demo-panel-1">
    <coral-tab>Tab 1</coral-tab>
    <coral-tab>Tab 2</coral-tab>
    <coral-tab>Tab 3</coral-tab>
    <coral-tab>Tab 4</coral-tab>
  </coral-tablist>
  <coral-panelstack id="coral-demo-panel-1">
    <coral-panel class="coral-Well">
      Tab 1 Content
    </coral-panel>
    <coral-panel class="coral-Well">
      Tab 2 Content
    </coral-panel>
    <coral-panel class="coral-Well">
      Tab 3 Content
    </coral-panel>
    <coral-panel class="coral-Well">
      Tab 4 Content
    </coral-panel>
  </coral-panelstack>
</coral-tabview>

JavaScript Example

You can also initialize a tabbed UI directly in JavaScript. First, the Coral.TabList and Coral.PanelStack are created. Finally, a Coral.TabView is created to contain the first two elements. 

// new Coral.TabList()
var tablist = new Coral.TabList().set({
  target: 'coral-demo-panel-3'
});
tablist.items.add({
  label: {
    innerHTML: 'Tab 1'
  }
  selected: true
});
tablist.items.add({
  label: {
    innerHTML: 'Tab 2'
  }
});
tablist.items.add({
  label: {
    innerHTML: 'Tab 3'
  }
});
tablist.items.add({
  label: {
    innerHTML: 'Tab 4 (disabled)'
  }
  disabled: true
});
// new Coral.PanelStack()
var panelstack = new Coral.PanelStack().set({
  id: 'coral-demo-panel-3'
});
panelstack.items.add({
  content.innerHTML: 'Tab 1 Content.'
});
panelstack.items.add({
  content.innerHTML: 'Tab 2 Content.'
});
panelstack.items.add({
  content.innerHTML: 'Tab 3 Content.'
});
panelstack.items.add({
  content.innerHTML: 'Tab 4 Content.'
});
// new Coral.TabView()
var tabview = new Coral.TabView().set({
  panelStack: panelstack,
  tabList: tablist
});

Also see Coral.TabList and Coral.PanelStack for more details.

Coral.TabView API

Constructor

JavaScript:

new Coral.TabView() or document.createElement('coral-tabview')

HTML Tag:

<coral-tabview>

Extends

Static Properties

Coral.TabView.orientation {String}

TabView orientations.

Properties:

Name Type Value Description
HORIZONTAL String horizontal Tabs on top of the panels. This is the default.
VERTICAL String vertical Tabs are rendered on the side and match the height of the panels.

Instance Properties

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.orientation {Coral.TabView.orientation}

Reflected
The TabView's orientation.
Default Value:
  • Coral.TabView.orientation.HORIZONTAL
HTML Attribute:
  • orientation

instance.panelStack {HTMLElement}

The PanelStack which contains all the panels.

instance.tabList {HTMLElement}

The TabList which handles all the tabs.

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
 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.
Inherited From:

instance.set

Set a single property.
Parameters:
Name Type Description
property String The name of the property to set.
value * The value to set the property to.
silent Boolean If true, events should not be triggered as a result of this set.
Returns:
this, chainable. {Coral.Component}
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
 Set to false to prevent the event from bubbling.
cancelable Boolean Yes
 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:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      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:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        coral-tabview:change

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

        Event object.

        Name Type Description
        event.detail.selection HTMLElement The new selected tab panel item.
        event.detail.oldSelection HTMLElement The prior selected tab panel item.