Table of Contents
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
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
About
Settings
Profile
Home Content
About Content
Settings Content
Profile Content
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>
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
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
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.
Use the persistent-id attribute to automatically save and restore the active tab to browser localStorage. When the component is reloaded, it will restore the previously active tab.
<k-tabs persistent-id="userPreferences">
<k-tab for="account">Account</k-tab>
<k-tab for="settings">Settings</k-tab>
<k-tab-content name="account">
<p>Account settings content</p>
</k-tab-content>
<k-tab-content name="settings">
<p>General settings content</p>
</k-tab-content>
</k-tabs>
Account
Settings
Account settings content
General settings content
new Tabs()
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.
persistentId: string
A unique identifier for persisting the active tab state to localStorage. When set, the component will save the active tab name and restore it on reload. Syncs to persistent-id attribute.
contents: TabContent[]
Returns an array of all tab content elements.
tabs: Tab[]
Returns an array of all tab elements.
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.
tab
Fired when the active tab changes. Detail contains { tab } with the name of the new active tab.
restored
Fired when the active tab is restored from persistent localStorage. Detail contains { tab } with the name of the restored active tab. Only fires when persistent-id is set and a stored value is found.
Kempo UI