Table of Contents
Examples
Basic UsageTab Spacers
Scrolling Tabs
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
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 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 Content
JavaScript Content
Scrolling Tabs
When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.
<k-tabs>
<k-tab for="tab1">Tab 1</k-tab>
<k-tab for="tab2">Tab 2</k-tab>
<k-tab for="tab3">Tab 3</k-tab>
<k-tab for="tab4">Tab 4</k-tab>
<k-tab for="tab5">Tab 5</k-tab>
<k-tab for="tab6">Tab 6</k-tab>
<k-tab for="tab7">Tab 7</k-tab>
<k-tab for="tab8">Tab 8</k-tab>
<k-tab for="tab9">Tab 9</k-tab>
<k-tab for="tab10">Tab 10</k-tab>
<!-- Tab Contents -->
<k-tab-content name="tab1">Content 1</k-tab-content>
<k-tab-content name="tab2">Content 2</k-tab-content>
<k-tab-content name="tab3">Content 3</k-tab-content>
<k-tab-content name="tab4">Content 4</k-tab-content>
<k-tab-content name="tab5">Content 5</k-tab-content>
<k-tab-content name="tab6">Content 6</k-tab-content>
<k-tab-content name="tab7">Content 7</k-tab-content>
<k-tab-content name="tab8">Content 8</k-tab-content>
<k-tab-content name="tab9">Content 9</k-tab-content>
<k-tab-content name="tab10">Content 10</k-tab-content>
</k-tabs>
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
JavaScript Reference
Constructor
Extends Component
new Tabs()
Requirements
Attributes
active: string
The name of the active tab.
Methods
getActiveTab(): Tab
Returns the currently active tab.
getTab(id): Tab
Returns the tab with the specified id.
getActiveContent(): TabContent
Returns the currently active tab content.
getContent(id): TabContent
Returns the tab content with the specified id.