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.
This component holds a collection of panels and shows the selected panel. A
typical use of a Coral.PanelStack would be controlling content
in a Coral.TabView or a
Coral.WizardView.
See the documentation for those other components for a working example.
Panel 0: This is the content of Panel 1Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !Panel 2: This is the content of Panel 2Panel 3: This is the content of Panel 3. You need JavaScript to interact with this componentPanel 4: This is the content of Panel 4
<coral-panelstackclass="coral-Well"id="panelListPreselectedItem"><coral-panel>Panel 0: This is the content of Panel 1</coral-panel><coral-panelselected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel><coral-panel>Panel 2: This is the content of Panel 2</coral-panel><coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel><coral-panel>Panel 4: This is the content of Panel 4</coral-panel></coral-panelstack>
Panel 0: This is the content of Panel 1Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !Panel 2: This is the content of Panel 2Panel 3: This is the content of Panel 3. You need JavaScript to interact with this componentPanel 4: This is the content of Panel 4
<coral-panelstackclass="coral-Well"id="panelListNoneSelected"><coral-panel>Panel 0: This is the content of Panel 1</coral-panel><coral-panel>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel><coral-panel>Panel 2: This is the content of Panel 2</coral-panel><coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel><coral-panel>Panel 4: This is the content of Panel 4</coral-panel></coral-panelstack>
The following shows how to interaction with the selecteditem in the PanelStack
component. Below 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.
<coral-panelstackid="select_rotation_example"><coral-panelselectedclass="coral-Well">
Panel 0: I am Panel 0.
</coral-panel><coral-panelclass="coral-Well">
Panel 1: Haha, Panel 1 here.
</coral-panel><coral-panelclass="coral-Well">
Panel 2: Wait for it ! Panel 3 comes next.
</coral-panel><coral-panelclass="coral-Well">
Panel 3: I will not go away, only if you click on "Cycle"
</coral-panel><coral-panelclass="coral-Well">
Panel 4: Last, but not least.
</coral-panel></coral-panelstack><h4id='selectedIndexLabel'>Selected Index: 0</h4>
Click this cycle button to interact with the PanelStack
The following JavaScript shows how to set the selected attribute
<script>
$(document).ready(function(){var panelList = document.querySelector('#select_rotation_example');
$('#cycleActive').on('click',function(){var next = $(panelList.selectedItem).nextAll('coral-panel').first();if(!next.length){
next = $(panelList).children('coral-panel').first();}
next.attr('selected','');
$('#selectedIndexLabel').text('Selected Index: '+ panelList.items.getAll().indexOf(next[0]));});});</script>
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.
Triggered when an item is added to the Collection. Collection events are not synchronous so the DOM may reflect
a different reality although every addition or removal will be reported.
Triggered when an item is removed from a Collection. Collection events are not synchronous so the DOM may reflect
a different reality although every addition or removal will be reported.
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.
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.