Tab Group
<gstock-tab-group>
|
GstockTabGroup
API
Properties
| Name | Description | Reflects | 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
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-tab-show-event
|
onGstockTabShowEvent
|
Emitted when a tab is shown. | - |
gstock-tab-hide-event
|
onGstockTabHideEvent
|
Emitted when a tab is hidden. | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
default
|
Used for grouping tab panels in the tab group. Must be
<gstock-tab-panel> elements.
|
nav
|
Used for grouping tabs in the tab group. Must be
<gstock-tab> elements.
|
Learn more about slots .
Methods
| Name | Description |
|---|---|
show(
|
Shows the specified tab panel. |
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 custom properties .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
nav
|
The tab group’s navigation container where tabs are slotted in. |
nav-start
|
The starting slot in the navigation container. |
nav-end
|
The ending slot in the navigation container. |
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
<gstock-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 CSS parts .
Dependencies
This component automatically imports the following dependencies.