# Tabs

Table of Contents

###### Examples

Basic Usage
Tab Spacers
Scrolling Tabs
Fixed Height

###### JavaScript Reference

Constructor
Requirements
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 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

- Component

### 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.