Documentation
Docs

Tabs

ska-theme includes an Alpine.js component for creating tabs.

For creating tabs, add the x-data="skaTabs" attribute to the root element.
The element that contains the buttons that change tabs should have the x-bind="tablist" attribute and individual buttons that allow to select a tab should have the x-bind="tabItem('tabId')" attribute with a unique ID that matches the content.
Content elements should have the x-bind="tab('tabId')" attribute.

There is 1 argument available for the skaTabs component: initialActive. Using x-data="skaTabs({initialActive: 'tabId'})" will configure which tab is initially active.

The conditions block is useful for keeping tabs organized in the block editor and only rendering one at a time.

Module argumentsTypeScript
export interface TabsConfig {
	/** ID of tab that should be initially selected. */
	initialActive?: string
}

Example tabs

First

Second

Third

First

Second

Third

First

Second

Third