Tab Group
<ahi-tab-group> | AhiTabGroup
Tab groups organize content into a container that shows one section at a time.
Use to alternate among related views within the same context.
<ahi-tab-group>
<ahi-tab slot="nav" panel="office-overview">Office Overview</ahi-tab>
<ahi-tab slot="nav" panel="pre-cert-counts">Pre-Cert Counts</ahi-tab>
<ahi-tab slot="nav" panel="rcm-dashboard">RCM Dashboard</ahi-tab>
<ahi-tab slot="nav" panel="disabled" disabled>Disabled</ahi-tab>
<ahi-tab-panel name="office-overview">
This is the Office Overview tab panel.
</ahi-tab-panel>
<ahi-tab-panel name="pre-cert-counts">
This is the Pre-Cert Counts tab panel.
</ahi-tab-panel>
<ahi-tab-panel name="rcm-dashboard">
This is the RCM Dashboard tab panel.
</ahi-tab-panel>
<ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>
Examples
Tabs on bottom
Tabs can be shown on the bottom by setting placement to bottom.
<ahi-tab-group placement="bottom">
<ahi-tab slot="nav" panel="general">General</ahi-tab>
<ahi-tab slot="nav" panel="custom">Custom</ahi-tab>
<ahi-tab slot="nav" panel="advanced">Advanced</ahi-tab>
<ahi-tab slot="nav" panel="disabled" disabled>Disabled</ahi-tab>
<ahi-tab-panel name="general">This is the general tab panel.</ahi-tab-panel>
<ahi-tab-panel name="custom">This is the custom tab panel.</ahi-tab-panel>
<ahi-tab-panel name="advanced">This is the advanced tab panel.</ahi-tab-panel>
<ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>
Tabs on start
Tabs can be shown on the starting side by setting placement to start.
<ahi-tab-group placement="start">
<ahi-tab slot="nav" panel="general">General</ahi-tab>
<ahi-tab slot="nav" panel="custom">Custom</ahi-tab>
<ahi-tab slot="nav" panel="advanced">Advanced</ahi-tab>
<ahi-tab slot="nav" panel="disabled" disabled>Disabled</ahi-tab>
<ahi-tab-panel name="general">This is the general tab panel.</ahi-tab-panel>
<ahi-tab-panel name="custom">This is the custom tab panel.</ahi-tab-panel>
<ahi-tab-panel name="advanced">This is the advanced tab panel.</ahi-tab-panel>
<ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>
Tabs on end
Tabs can be shown on the ending side by setting placement to end.
<ahi-tab-group placement="end">
<ahi-tab slot="nav" panel="general">General</ahi-tab>
<ahi-tab slot="nav" panel="custom">Custom</ahi-tab>
<ahi-tab slot="nav" panel="advanced">Advanced</ahi-tab>
<ahi-tab slot="nav" panel="disabled" disabled>Disabled</ahi-tab>
<ahi-tab-panel name="general">This is the general tab panel.</ahi-tab-panel>
<ahi-tab-panel name="custom">This is the custom tab panel.</ahi-tab-panel>
<ahi-tab-panel name="advanced">This is the advanced tab panel.</ahi-tab-panel>
<ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>
Closable tabs
Add the closable attribute to a tab to show a close button. This example shows how you can
dynamically remove tabs from the DOM when the close button is activated.
<ahi-tab-group class="tab-group-closable">
<ahi-tab slot="nav" panel="general"> General </ahi-tab>
<ahi-tab slot="nav" panel="closable-1" closable> Closable 1 </ahi-tab>
<ahi-tab slot="nav" panel="closable-2" closable> Closable 2 </ahi-tab>
<ahi-tab slot="nav" panel="closable-3" closable> Closable 3 </ahi-tab>
<ahi-tab-panel name="general">This is the general tab panel.</ahi-tab-panel>
<ahi-tab-panel name="closable-1"> This is the first closable tab panel. </ahi-tab-panel>
<ahi-tab-panel name="closable-2"> This is the second closable tab panel. </ahi-tab-panel>
<ahi-tab-panel name="closable-3"> This is the third closable tab panel. </ahi-tab-panel>
</ahi-tab-group>
<script>
const tabGroup = document.querySelector('.tab-group-closable');
tabGroup.addEventListener('ahi-close', event => {
const tab = event.target;
const panel = tabGroup.querySelector(`ahi-tab-panel[name="${tab.panel}"]`);
// Show the previous tab if the tab is currently active
if (tab.active) {
tabGroup.show(tab.previousElementSibling.panel);
}
// Remove the tab and panel
tab.remove();
panel.remove();
});
</script>
Scrollable tabs
When there are more tabs than horizontal space allows, the nav will be scrollable.
<ahi-tab-group>
<ahi-tab slot="nav" panel="tab-1"> Tab 1 </ahi-tab>
<ahi-tab slot="nav" panel="tab-2"> Tab 2 </ahi-tab>
<ahi-tab slot="nav" panel="tab-3"> Tab 3 </ahi-tab>
<ahi-tab slot="nav" panel="tab-4"> Tab 4 </ahi-tab>
<ahi-tab slot="nav" panel="tab-5"> Tab 5 </ahi-tab>
<ahi-tab slot="nav" panel="tab-6"> Tab 6 </ahi-tab>
<ahi-tab slot="nav" panel="tab-7"> Tab 7 </ahi-tab>
<ahi-tab slot="nav" panel="tab-8"> Tab 8 </ahi-tab>
<ahi-tab slot="nav" panel="tab-9"> Tab 9 </ahi-tab>
<ahi-tab slot="nav" panel="tab-10"> Tab 10 </ahi-tab>
<ahi-tab slot="nav" panel="tab-11"> Tab 11 </ahi-tab>
<ahi-tab slot="nav" panel="tab-12"> Tab 12 </ahi-tab>
<ahi-tab slot="nav" panel="tab-13"> Tab 13 </ahi-tab>
<ahi-tab slot="nav" panel="tab-14"> Tab 14 </ahi-tab>
<ahi-tab slot="nav" panel="tab-15"> Tab 15 </ahi-tab>
<ahi-tab slot="nav" panel="tab-16"> Tab 16 </ahi-tab>
<ahi-tab slot="nav" panel="tab-17"> Tab 17 </ahi-tab>
<ahi-tab slot="nav" panel="tab-18"> Tab 18 </ahi-tab>
<ahi-tab slot="nav" panel="tab-19"> Tab 19 </ahi-tab>
<ahi-tab slot="nav" panel="tab-20"> Tab 20 </ahi-tab>
<ahi-tab-panel name="tab-1">Tab panel 1</ahi-tab-panel>
<ahi-tab-panel name="tab-2">Tab panel 2</ahi-tab-panel>
<ahi-tab-panel name="tab-3">Tab panel 3</ahi-tab-panel>
<ahi-tab-panel name="tab-4">Tab panel 4</ahi-tab-panel>
<ahi-tab-panel name="tab-5">Tab panel 5</ahi-tab-panel>
<ahi-tab-panel name="tab-6">Tab panel 6</ahi-tab-panel>
<ahi-tab-panel name="tab-7">Tab panel 7</ahi-tab-panel>
<ahi-tab-panel name="tab-8">Tab panel 8</ahi-tab-panel>
<ahi-tab-panel name="tab-9">Tab panel 9</ahi-tab-panel>
<ahi-tab-panel name="tab-10">Tab panel 10</ahi-tab-panel>
<ahi-tab-panel name="tab-11">Tab panel 11</ahi-tab-panel>
<ahi-tab-panel name="tab-12">Tab panel 12</ahi-tab-panel>
<ahi-tab-panel name="tab-13">Tab panel 13</ahi-tab-panel>
<ahi-tab-panel name="tab-14">Tab panel 14</ahi-tab-panel>
<ahi-tab-panel name="tab-15">Tab panel 15</ahi-tab-panel>
<ahi-tab-panel name="tab-16">Tab panel 16</ahi-tab-panel>
<ahi-tab-panel name="tab-17">Tab panel 17</ahi-tab-panel>
<ahi-tab-panel name="tab-18">Tab panel 18</ahi-tab-panel>
<ahi-tab-panel name="tab-19">Tab panel 19</ahi-tab-panel>
<ahi-tab-panel name="tab-20">Tab panel 20</ahi-tab-panel>
</ahi-tab-group>
Fixed scroll controls
When tabs are scrolled all the way to one side, the scroll button on that side can’t be clicked. Set the
fixed-scroll-controls attribute to keep the effected button visible in that case.
<ahi-tab-group fixed-scroll-controls>
<ahi-tab slot="nav" panel="tab-1">Tab 1</ahi-tab>
<ahi-tab slot="nav" panel="tab-2">Tab 2</ahi-tab>
<ahi-tab slot="nav" panel="tab-3">Tab 3</ahi-tab>
<ahi-tab slot="nav" panel="tab-4">Tab 4</ahi-tab>
<ahi-tab slot="nav" panel="tab-5">Tab 5</ahi-tab>
<ahi-tab slot="nav" panel="tab-6">Tab 6</ahi-tab>
<ahi-tab slot="nav" panel="tab-7">Tab 7</ahi-tab>
<ahi-tab slot="nav" panel="tab-8">Tab 8</ahi-tab>
<ahi-tab slot="nav" panel="tab-9">Tab 9</ahi-tab>
<ahi-tab slot="nav" panel="tab-10">Tab 10</ahi-tab>
<ahi-tab slot="nav" panel="tab-11">Tab 11</ahi-tab>
<ahi-tab slot="nav" panel="tab-12">Tab 12</ahi-tab>
<ahi-tab slot="nav" panel="tab-13">Tab 13</ahi-tab>
<ahi-tab slot="nav" panel="tab-14">Tab 14</ahi-tab>
<ahi-tab slot="nav" panel="tab-15">Tab 15</ahi-tab>
<ahi-tab slot="nav" panel="tab-16">Tab 16</ahi-tab>
<ahi-tab slot="nav" panel="tab-17">Tab 17</ahi-tab>
<ahi-tab slot="nav" panel="tab-18">Tab 18</ahi-tab>
<ahi-tab slot="nav" panel="tab-19">Tab 19</ahi-tab>
<ahi-tab slot="nav" panel="tab-20">Tab 20</ahi-tab>
<ahi-tab-panel name="tab-1">Tab panel 1</ahi-tab-panel>
<ahi-tab-panel name="tab-2">Tab panel 2</ahi-tab-panel>
<ahi-tab-panel name="tab-3">Tab panel 3</ahi-tab-panel>
<ahi-tab-panel name="tab-4">Tab panel 4</ahi-tab-panel>
<ahi-tab-panel name="tab-5">Tab panel 5</ahi-tab-panel>
<ahi-tab-panel name="tab-6">Tab panel 6</ahi-tab-panel>
<ahi-tab-panel name="tab-7">Tab panel 7</ahi-tab-panel>
<ahi-tab-panel name="tab-8">Tab panel 8</ahi-tab-panel>
<ahi-tab-panel name="tab-9">Tab panel 9</ahi-tab-panel>
<ahi-tab-panel name="tab-10">Tab panel 10</ahi-tab-panel>
<ahi-tab-panel name="tab-11">Tab panel 11</ahi-tab-panel>
<ahi-tab-panel name="tab-12">Tab panel 12</ahi-tab-panel>
<ahi-tab-panel name="tab-13">Tab panel 13</ahi-tab-panel>
<ahi-tab-panel name="tab-14">Tab panel 14</ahi-tab-panel>
<ahi-tab-panel name="tab-15">Tab panel 15</ahi-tab-panel>
<ahi-tab-panel name="tab-16">Tab panel 16</ahi-tab-panel>
<ahi-tab-panel name="tab-17">Tab panel 17</ahi-tab-panel>
<ahi-tab-panel name="tab-18">Tab panel 18</ahi-tab-panel>
<ahi-tab-panel name="tab-19">Tab panel 19</ahi-tab-panel>
<ahi-tab-panel name="tab-20">Tab panel 20</ahi-tab-panel>
</ahi-tab-group>
Manual activation
When focused, keyboard users can press Left or Right to select the desired tab. By
default, the corresponding tab panel will be shown immediately (automatic activation). You can change this
behavior by setting activation="manual" which will require the user to press
Space or Enter before showing the tab panel (manual activation).
<ahi-tab-group activation="manual">
<ahi-tab slot="nav" panel="office-overview"> Office Overview </ahi-tab>
<ahi-tab slot="nav" panel="pre-cert-counts"> Pre-Cert Counts </ahi-tab>
<ahi-tab slot="nav" panel="rcm-dashboard"> RCM Dashboard </ahi-tab>
<ahi-tab slot="nav" panel="disabled" disabled> Disabled </ahi-tab>
<ahi-tab-panel name="office-overview"> This is the Office Overview tab panel. </ahi-tab-panel>
<ahi-tab-panel name="pre-cert-counts"> This is the Pre-Cert Counts tab panel. </ahi-tab-panel>
<ahi-tab-panel name="rcm-dashboard"> This is the RCM Dashboard tab panel. </ahi-tab-panel>
<ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>
Without panels
Listen to the ahi-tab-show event to manually handle tabs being shown.
<ahi-tab-group class="tab-group-without-panels">
<ahi-tab slot="nav" panel="active">Active</ahi-tab>
<ahi-tab slot="nav" panel="inactive">Inactive</ahi-tab>
<ahi-tab slot="nav" panel="resolved">Resolved</ahi-tab>
</ahi-tab-group>
<script>
const tabGroup = document.querySelector('.tab-group-without-panels');
tabGroup.addEventListener('ahi-tab-show', event => {
console.log(`Selected tab: ${event.detail.name}`);
});
</script>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/tab-group/tab-group.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/tab-group/tab-group.js';Slots
| Name | Description |
|---|---|
| (default) |
Used for grouping tab panels in the tab group. Must be <ahi-tab-panel> elements.
|
nav
|
Used for grouping tabs in the tab group. Must be <ahi-tab> elements. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
placement
|
The placement of the tabs. |
'top' | 'bottom' | 'start' | 'end'
|
'top'
|
|
activation
|
When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter. |
'auto' | 'manual'
|
'auto'
|
|
noScrollControls
no-scroll-controls
|
Disables the scroll arrows that appear when tabs overflow. |
boolean
|
false
|
|
fixedScrollControls
fixed-scroll-controls
|
Prevent scroll buttons from being hidden when inactive. |
boolean
|
false
|
|
padding
|
Controls the padding of the tab group component. |
'm' | 'l' | 'none' | undefined
|
'm'
|
|
sticky
|
Whether the tab list sticks to the top of the tab group as you scroll. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-tab-show |
Emitted when a tab is shown. |
{ name: String }
|
ahi-tab-hide |
Emitted when a tab is hidden. |
{ name: String }
|
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the specified tab panel. |
panel: string
|
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--indicator-color |
The color of the active tab indicator. | |
--track-color |
The color of the indicator’s track (the line that separates tabs from panels). | |
--track-width |
The width of the indicator’s track (the line that separates tabs from panels). |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the tab-group part instead. |
tab-group |
The component’s outer wrapper. |
nav |
The tab group’s navigation container where tabs are slotted in. |
tabs |
The container that wraps the tabs. |
active-tab-indicator |
The line that highlights the currently selected tab. |
body |
The tab group’s body where tab panels are slotted in. |
scroll-button |
The previous/next scroll buttons that show when tabs are scrollable, an
<ahi-icon-button>.
|
scroll-button--start |
The starting scroll button. |
scroll-button--end |
The ending scroll button. |
scroll-button__base |
The scroll button’s exported base part. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-icon><ahi-icon-button>