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

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>
Long Tab Name 1 Long Tab Name 2 Long Tab Name 3 Long Tab Name 4 Long Tab Name 5 Long Tab Name 6 Long Tab Name 7 Long Tab Name 8 Long Tab Name 9 Long Tab Name 10

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.