Tab Group

<gstock-tab-group> | GstockTabGroup

API

Propiedades

Nombre Descripción Reflects Tipo Por defecto
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.

Aprende más sobre atributos y propiedades .

Eventos

Nombre React Event Descripción Event Detail
gstock-tab-show-event onGstockTabShowEvent Emitted when a tab is shown. -
gstock-tab-hide-event onGstockTabHideEvent Emitted when a tab is hidden. -

Aprende más sobre eventos .

Slots

Nombre Descripción
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.

Aprende más sobre slots .

Métodos

Nombre Descripción
show(
panel: string
) 		Shows the specified tab panel.

Aprende más sobre métodos .

Propiedades personalizadas

Nombre Descripción 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).

Aprende más sobre propiedades personalizadas .

Partes

Nombre Descripción
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.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.