Table of Contents
Examples
Basic UsageTab Spacers
Scrolling Tabs
Fixed Height
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
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>
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.