{"id":35,"date":"2025-09-26T08:50:50","date_gmt":"2025-09-26T08:50:50","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/tabs\/"},"modified":"2025-09-26T09:42:13","modified_gmt":"2025-09-26T09:42:13","slug":"tabs","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/tabs\/","title":{"rendered":"Tabs"},"content":{"rendered":"\n

ska-theme includes an Alpine.js component for creating tabs.<\/p>\n\n\n\n

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

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

The conditions<\/a> block is useful for keeping tabs organized in the block editor and only rendering one at a time.<\/p>\n\n\n\n

Module arguments<\/span>TypeScript<\/span><\/header>
export interface TabsConfig {\n\t\/** ID of tab that should be initially selected. *\/\n\tinitialActive?: string\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
Example tabs<\/h2>\n\n\n
\n
\n
\n
    \n
  • \n