Skip to main content

TabsController

Purpose​

Stimulus controller to enable a tabbed view of a page.

Actions​

ActionPurpose
--

Targets​

TargetPurposeDefault
linkThe tab headings/buttons that will be used to open the tabs-
contentThe content panels for each tab.-

Classes​

ClassPurposeDefault
active (Optional)The class that is applied to the current active panel and linkis-active
hide (Optional)The class used to hide all inactive content panelshide

Values​

ValueTypeDescriptionDefault
currentTabNumberThe currently selected tab (zero indexed). Setting the initial value/Changing this at any time will change which panel is shown.0
equalizeBooleanWhether or not to make all content panels as big as the largest panel in the set.false

Events​

EventWhenDispatched onevent.detail
----

Side Effects​

The controller will add an event listener for click to all link targets.

The controller will add aria-selected to the currently active link target.

How to Use​