# Tabs

Table of Contents

###### Examples

Basic Usage
Tab Spacers

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

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Tabs()`

### Requirements

- Component

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