Step Group
<gstock-step-group>
|
GstockStepGroup
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
activation
|
When set to auto, navigating steps with the arrow keys will instantly show the corresponding step panel. When set to manual, the step will receive focus but will not show until the user presses spacebar or enter. |
'auto' | 'manual'
|
'auto'
|
|
color
|
The color of the step group. |
|
'primary' | 'secondary'
|
'primary'
|
scrollControls
scroll-controls
|
Disables the scroll arrows that appear when steps overflow. |
boolean
|
false
|
|
placement
|
The placement of the steps. |
'top' | 'bottom' | 'start' | 'end'
|
'top'
|
|
size
|
The size of the step. |
|
'small' | 'medium' | 'large'
|
'medium'
|
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-step-show-event
|
onGstockStepShowEvent
|
Emitted when a step is shown. | - |
gstock-step-hide-event
|
onGstockStepHideEvent
|
Emitted when a step is hidden. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
default
|
Used for grouping step panels in the step group. Must be
<gstock-step-panel> elements.
|
nav
|
Used for grouping steps in the step group. Must be
<gstock-step> elements.
|
nav-start-content
|
Used for adding content to the start of the step group’s navigation container. |
nav-end-content
|
Used for adding content to the end of the step group’s navigation container. |
Aprende más sobre slots .
Métodos
| Nombre | Descripción |
|---|---|
getActiveStep( )
|
Get the active step. |
show(
|
Shows the specified step panel. |
previous( )
|
Shows the next step panel. |
next( )
|
Shows the previous step panel. |
Aprende más sobre métodos .
Propiedades personalizadas
| Nombre | Descripción | Default |
|---|---|---|
--indicator-color
|
The color of the active step indicator. | |
--track-color
|
The color of the indicator’s track (the line that separates steps from panels). | |
--track-width
|
The width of the indicator’s track (the line that separates steps from panels). |
Aprende más sobre propiedades personalizadas .
Partes
| Nombre | Descripción |
|---|---|
base
|
The component’s base wrapper. |
nav
|
The step group’s navigation container where steps are slotted in. |
nav-start
|
The starting slot in the navigation container. |
nav-end
|
The ending slot in the navigation container. |
steps
|
The container that wraps the steps. |
active-step-indicator
|
The line that highlights the currently selected step. |
body
|
The step group’s body where step panels are slotted in. |
scroll-button
|
The previous/next scroll buttons that show when steps 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.