This component holds a collection of panels and shows the selected panel. This component uses the Coral.mixin.selectionList specification.

Markup Examples

|

Preselected Item

Panel 0: This is the content of Panel 1 Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack ! Panel 2: This is the content of Panel 2 Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component Panel 4: This is the content of Panel 4
Show Markup

                      

None selected

Nothing is shown, if nothing is selected

Panel 0: This is the content of Panel 1 Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack ! Panel 2: This is the content of Panel 2 Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component Panel 4: This is the content of Panel 4
Show Markup

            

Programmatically Interaction

The following shows how to interaction with the selecteditem in the PanelStack component.

This is a PanelStack, that applies the coral-Well style to its items. Neat, isn't it.

Panel 0: I am Panel 0. Panel 1: Haha, Panel 1 here. Panel 2: Wait for it ! Panel 3 comes next. | Panel 3: I will not go away, only if you click on "Cycle" Panel 4: Last, but not least.

Selected Index: 0

Show Markup

                  

Click this cycle button to interact with the PanelStack

The following JavaScript shows how to set the selected attribute

                        
                        

Coral.PanelStack API

Constructor

JavaScript:

new Coral.PanelStack() or document.createElement('coral-panelstack')

HTML Tag:

<coral-panelstack>

Extends

Mixes In

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.selectedItem {HTMLElement}

Readonly
The selected item of the PanelStack.

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-panelstack:change

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

Event object.

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

Coral.Panel API

Constructor

JavaScript:

new Coral.Panel() or document.createElement('coral-panel')

HTML Tag:

<coral-panel>

Extends

Mixes In

Sub-components

Instance Properties

instance.content {HTMLElement}

The panelstack items's content element.

instance.selected {Boolean}

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

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: