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

Fixed Height

Use the fixed-height attribute to make the tabs component fill its container height and enable content scrolling.

<k-tabs fixed-height="true" style="height: 200px">
<k-tab for="fixed1">Tab 1</k-tab>
<k-tab for="fixed2">Tab 2</k-tab>
<k-tab-content name="fixed1">
<p>This content will scroll if it's too long.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</k-tab-content>
<k-tab-content name="fixed2">
<p>Another tab that is not tall enough.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</k-tab-content>
</k-tabs>
Tab 1 Tab 2

This content will scroll if it's too long.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Another tab that is not tall enough.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

JavaScript Reference

Constructor

Extends Component
new Tabs()

Requirements

Attributes

active: string

The name of the active tab.

fixed-height: boolean

When true, the tabs component will fill its container height and enable content scrolling.

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.