<wa-tab-group>
Tab groups organize content into a container that shows one section at a time.
Tab groups make use of tabs and
tab panels. Each tab must be slotted into the nav
slot
and its panel
must refer to a tab panel of the same name.
<wa-tab-group> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel> </wa-tab-group>
To make a tab active, set the active
attribute to the name of the appropriate panel.
<wa-tab-group active="advanced"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> </wa-tab-group>
Tabs can be shown on the bottom by setting placement
to bottom
.
<wa-tab-group placement="bottom"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel> </wa-tab-group>
Tabs can be shown on the starting side by setting placement
to start
.
<wa-tab-group placement="start"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel> </wa-tab-group>
Tabs can be shown on the ending side by setting placement
to end
.
<wa-tab-group placement="end"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel> </wa-tab-group>
You can make a tab closable by adding a close button next to the tab and inside the nav
slot. You
can position the button to your liking with CSS and handle close/restore behaviors by removing/appending the
tab as desired. Note the use of tabindex="-1"
, which prevents the close button from
interfering with the tab order. The close button is still recognizable to the virtual cursor in screen
readers.
<wa-tab-group class="tabs-closable"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="closable">Closable</wa-tab> <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button> <wa-tab slot="nav" panel="closable-2">Advanced</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="closable">This is the closable tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> </wa-tab-group> <br> <wa-button disabled>Restore tab</wa-button> <style> .tabs-closable wa-icon-button { position: relative; left: -1rem; top: .75rem; } </style> <script> const tabGroup = document.querySelector('.tabs-closable'); const generalTab = tabGroup.querySelectorAll('wa-tab')[0]; const closableTab = tabGroup.querySelectorAll('wa-tab')[1]; const closeButton = tabGroup.querySelector('wa-icon-button[slot="nav"]'); const restoreButton = tabGroup.nextElementSibling.nextElementSibling; // Remove the tab when the close button is clicked closeButton.addEventListener('click', () => { closableTab.remove(); closeButton.remove(); restoreButton.disabled = false; }); // Restore the tab restoreButton.addEventListener('click', () => { restoreButton.disabled = true; generalTab.insertAdjacentElement('afterend', closeButton); generalTab.insertAdjacentElement('afterend', closableTab); }) </script>
When there are more tabs than horizontal space allows, the nav will be scrollable.
<wa-tab-group> <wa-tab slot="nav" panel="tab-1">Tab 1</wa-tab> <wa-tab slot="nav" panel="tab-2">Tab 2</wa-tab> <wa-tab slot="nav" panel="tab-3">Tab 3</wa-tab> <wa-tab slot="nav" panel="tab-4">Tab 4</wa-tab> <wa-tab slot="nav" panel="tab-5">Tab 5</wa-tab> <wa-tab slot="nav" panel="tab-6">Tab 6</wa-tab> <wa-tab slot="nav" panel="tab-7">Tab 7</wa-tab> <wa-tab slot="nav" panel="tab-8">Tab 8</wa-tab> <wa-tab slot="nav" panel="tab-9">Tab 9</wa-tab> <wa-tab slot="nav" panel="tab-10">Tab 10</wa-tab> <wa-tab slot="nav" panel="tab-11">Tab 11</wa-tab> <wa-tab slot="nav" panel="tab-12">Tab 12</wa-tab> <wa-tab slot="nav" panel="tab-13">Tab 13</wa-tab> <wa-tab slot="nav" panel="tab-14">Tab 14</wa-tab> <wa-tab slot="nav" panel="tab-15">Tab 15</wa-tab> <wa-tab slot="nav" panel="tab-16">Tab 16</wa-tab> <wa-tab slot="nav" panel="tab-17">Tab 17</wa-tab> <wa-tab slot="nav" panel="tab-18">Tab 18</wa-tab> <wa-tab slot="nav" panel="tab-19">Tab 19</wa-tab> <wa-tab slot="nav" panel="tab-20">Tab 20</wa-tab> <wa-tab-panel name="tab-1">Tab panel 1</wa-tab-panel> <wa-tab-panel name="tab-2">Tab panel 2</wa-tab-panel> <wa-tab-panel name="tab-3">Tab panel 3</wa-tab-panel> <wa-tab-panel name="tab-4">Tab panel 4</wa-tab-panel> <wa-tab-panel name="tab-5">Tab panel 5</wa-tab-panel> <wa-tab-panel name="tab-6">Tab panel 6</wa-tab-panel> <wa-tab-panel name="tab-7">Tab panel 7</wa-tab-panel> <wa-tab-panel name="tab-8">Tab panel 8</wa-tab-panel> <wa-tab-panel name="tab-9">Tab panel 9</wa-tab-panel> <wa-tab-panel name="tab-10">Tab panel 10</wa-tab-panel> <wa-tab-panel name="tab-11">Tab panel 11</wa-tab-panel> <wa-tab-panel name="tab-12">Tab panel 12</wa-tab-panel> <wa-tab-panel name="tab-13">Tab panel 13</wa-tab-panel> <wa-tab-panel name="tab-14">Tab panel 14</wa-tab-panel> <wa-tab-panel name="tab-15">Tab panel 15</wa-tab-panel> <wa-tab-panel name="tab-16">Tab panel 16</wa-tab-panel> <wa-tab-panel name="tab-17">Tab panel 17</wa-tab-panel> <wa-tab-panel name="tab-18">Tab panel 18</wa-tab-panel> <wa-tab-panel name="tab-19">Tab panel 19</wa-tab-panel> <wa-tab-panel name="tab-20">Tab panel 20</wa-tab-panel> </wa-tab-group>
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).
<wa-tab-group activation="manual"> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab> <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel> <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel> <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel> <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel> </wa-tab-group>
Name | Description |
---|---|
(default) |
Used for grouping tab panels in the tab group. Must be <wa-tab-panel> elements.
|
nav
|
Used for grouping tabs in the tab group. Must be <wa-tab> elements.
|
Name | Description | Reflects | |
---|---|---|---|
active active
|
Sets the active tab.
Type
string
Default
''
|
|
|
placement placement
|
The placement of the tabs.
Type
'top' | 'bottom' | 'start' | 'end'
Default
'top'
|
||
activation 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.
Type
'auto' | 'manual'
Default
'auto'
|
||
noScrollControls no-scroll-controls
|
Disables the scroll arrows that appear when tabs overflow.
Type
boolean
Default
false
|
Name | Description |
---|---|
wa-tab-show |
Emitted when a tab is shown. |
wa-tab-hide |
Emitted when a tab is hidden. |
Name | Description |
---|---|
--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).
|
Name | Description |
---|---|
base |
The component's base wrapper. |
nav |
The tab group's navigation container where tabs are slotted in. |
tabs |
The container that wraps the tabs. |
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
<wa-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. |
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/tab-group/tab-group.js';