Step Group
<gstock-step-group>
|
GstockStepGroup
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
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. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-step-show-event
|
onGstockStepShowEvent
|
Emitted when a step is shown. | - |
gstock-step-hide-event
|
onGstockStepHideEvent
|
Emitted when a step is hidden. | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
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. |
Learn more about slots .
Methods
| Name | Description |
|---|---|
getActiveStep( )
|
Get the active step. |
show(
|
Shows the specified step panel. |
previous( )
|
Shows the next step panel. |
next( )
|
Shows the previous step panel. |
Learn more about methods .
Custom Properties
| Name | Description | 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). |
Learn more about custom properties .
CSS Parts
| Name | Description |
|---|---|
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. |
Learn more about CSS parts .
Dependencies
This component automatically imports the following dependencies.