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 create flexible spacing between tabs. This is useful for creating layouts where some tabs are grouped on the left and others on the right.
<k-tabs>
<k-tab for="left1">Home</k-tab>
<k-tab for="left2">About</k-tab>
<k-tab-spacer></k-tab-spacer>
<k-tab for="right1">Settings</k-tab>
<k-tab for="right2">Profile</k-tab>
<k-tab-content name="left1">
Home Content
</k-tab-content>
<k-tab-content name="left2">
About Content
</k-tab-content>
<k-tab-content name="right1">
Settings Content
</k-tab-content>
<k-tab-content name="right2">
Profile Content
</k-tab-content>
</k-tabs>Home Content
About Content
Settings Content
Profile Content
Scrolling Tabs
When there are many tabs that don't fit in the available space, the tabs will automatically become scrollable with left/right scroll indicators.
<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-content name="tab1">
Content for Tab 1
</k-tab-content>
<k-tab-content name="tab2">
Content for Tab 2
</k-tab-content>
<k-tab-content name="tab3">
Content for Tab 3
</k-tab-content>
<k-tab-content name="tab4">
Content for Tab 4
</k-tab-content>
<k-tab-content name="tab5">
Content for Tab 5
</k-tab-content>
<k-tab-content name="tab6">
Content for Tab 6
</k-tab-content>
<k-tab-content name="tab7">
Content for Tab 7
</k-tab-content>
<k-tab-content name="tab8">
Content for Tab 8
</k-tab-content>
</k-tabs>Content for Tab 1
Content for Tab 2
Content for Tab 3
Content for Tab 4
Content for Tab 5
Content for Tab 6
Content for Tab 7
Content for Tab 8
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 ShadowComponent
new Tabs()
Requirements
Properties
active: string
The name of the active tab. Syncs to active attribute.
fixedHeight: boolean
Whether the tabs component uses fixed height mode. Syncs to fixed-height attribute.
contents: TabContent[]
Returns an array of all tab content elements.
tabs: Tab[]
Returns an array of all tab elements.
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.
updateActiveElements(): void
Updates the active state of tabs and content based on the current active property.
updateScrollIndicators(): void
Updates the visibility of scroll indicators based on tab overflow.
Events
tab
Fired when the active tab changes. Detail contains { tab } with the name of the new active tab.