Tabs

Table of Contents

Basic Usage

Create tabs using the k-tabs component. Add tabs using the k-tab component and tab contents using the k-tab-content component. Use the for attribute on the k-tab component to link it to the corresponding k-tab-content component.

<k-tabs>
<k-tab for="html">HTML</k-tab>
<k-tab for="js">JavaScript</k-tab>
<k-tab-content name="html">
HTML Content
</k-tab-content>
<k-tab-content name="js">
JavaScript Content
</k-tab-content>
</k-tabs>
HTML JavaScript

HTML Content

JavaScript Content

Tab Spacers

Use the k-tab-spacer component to add a flexible space between tabs.

<k-tabs>
<k-tab for="html">HTML</k-tab>
<k-tab-spacer></k-tab-spacer>
<k-tab for="js">JavaScript</k-tab>
<k-tab-content name="html">
HTML Content
</k-tab-content>
<k-tab-content name="js">
JavaScript Content
</k-tab-content>
</k-tabs>
HTML JavaScript

HTML Content

JavaScript Content

JavaScript Reference

Constructor

Extends Component
new Tabs()

Requirements

Attributes

active: string

The name of the active tab.

Methods

getTab(id): Tab

Returns the tab with the specified id.

getActiveTab(): Tab

Returns the currently active tab.

getContent(id): TabContent

Returns the tab content with the specified id.

getActiveContent(): TabContent

Returns the currently active tab content.