Tab List
The <role-tab-list> component acts as a “synchronization layer” between Tabs and Tab Panels. It will automatically assign ids and provide the proper aria-* attributes for tabs and tab-panels following the APG.
Examples
Setting an initial tab
Bottom Tab List
Vertical Tab List (start)
Vertical Tab List (end)
Overflowing tab list
Styling the tab indicator
API Reference
Imports
HTML
<!-- Auto registers as <role-tab-list> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-list/tab-list-register.js"></script>
HTML
<script type="module">
// Auto registers as <role-tab-list>
import "https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-list/tab-list-register.js"
// Manual Register
import RoleTabList from "https://cdn.jsdelivr.net/npm/role-components/exports/components/tab-list/tab-list.js"
RoleTabList.define()
// => Registers as <role-tab-list>
</script>
JavaScript
// Auto registers as <role-tab-list>
import "role-components/exports/components/tab-list/tab-list-register.js"
// Manual Register
import RoleTabList "role-components/exports/components/tab-list/tab-list.js"
RoleTabList.define()
// => Registers as <role-tab-list>
Slots
| Name | Description |
|---|---|
tab
|
The slot to put tabs |
tab-panel
|
The slot to put tab-panels |
Events
| Name | Description |
|---|---|
role-tab-selection-change
|
Fires when a tab changes |
Functions
| Name | Description | Parameters |
|---|---|---|
setActiveTabFromIndex()
|
Sets the active tab + tab panel based on index (0-based) |
index: number, wrap: boolean
|
updateTabsAndPanels()
|
-
|
-
|
calculateIndicator()
|
-
|
tabElement: default
|
handleTabContainerKeyDown()
|
-
|
e: KeyboardEvent
|
handleTabClick()
|
-
|
e: Event
|
renderTabContainer()
|
-
|
-
|
renderTabPanelContainer()
|
-
|
-
|
getOrAssignId()
|
Assign a random UUID with a prefix if no id is found. Will return the “id” of the element if its already assigned. |
prefix: string, force: boolean
|
getTextDirection()
|
-
|
-
|
debounce()
|
-
|
callback: (...args: any[]) => any, options: { key: any, wait: number }
|
setAria()
|
-
|
key: T, value: ARIAMixin[T]
|
Parts
| Name | Description |
|---|---|
tab-container
|
The wrapper around tabs |
tab-panel-container
|
The wrapper around tab panels |