Provides a way to navigate a user through a multi-step process which features a vertical navigation with support for nested steps.
This component is not yet optimized for use on mobile devices. If you need a solution that works well with smaller screens, we recommend using the q2-stepper component instead.
The q2-stepper-vertical element is populated via q2-stepper-pane elements, each of which represents a single step in a multi-step process. At runtime, the q2-stepper-vertical element will build a navigation on the left side of the stepper which can be interacted with by the user.
Each instance of q2-stepper-pane can be in one of several states, that you are responsible for managing:
status provided - The step is enabled.status="complete" - The step is enabled but marked as completed.status="error" - The step is enabled but marked as having errors.status="locked" - The step is disabled.Each of the statuses appears like this:
<q2-stepper-vertical class="mrg-y(4)" current-step-id="step-1219" stencil-hydrated="">
<q2-stepper-pane label="Enabled / default" id="step-1218"></q2-stepper-pane>
<q2-stepper-pane status="complete" label="Complete" id="step-1219" is-active></q2-stepper-pane>
<q2-stepper-pane status="error" label="Error" id="step-1220"></q2-stepper-pane>
<q2-stepper-pane status="locked" label="Locked" id="step-1221"></q2-stepper-pane>
</q2-stepper-vertical>If the current-step-id attribute is set or updated, the q2-stepper-vertical element will automatically display that step. If it is not provided, the component will default to the first step.
The current-step-id corresponds to the id of the q2-stepper-pane you want to display. If no id is provided at runtime, one will automatically be generated.
The q2-stepper-vertical allows you to easily add child steps, which are steps that can be nested within another q2-stepper-pane element.
To use this feature is very easy. You just need to add your q2-stepper-pane elements within the children slot of another q2-stepper-pane element, and the component will take care of the rest.
Like This:
<q2-stepper-vertical class="mrg-y(4)" current-step-id="step-1222">
<q2-stepper-pane label="Parent step" id="step-1222" is-active>
<h2>My parent step</h2>
<div slot="children">
<q2-stepper-pane label="Enabled / default" id="step-1223">
<h3>My enabled child step</h3>
</q2-stepper-pane>
<q2-stepper-pane status="complete" label="Complete" id="step-1224">
<h3>My complete child step</h3>
</q2-stepper-pane>
<q2-stepper-pane status="error" label="Error" id="step-1225">
<h3>My error child step</h3>
</q2-stepper-pane>
<q2-stepper-pane status="locked" label="Locked" id="step-1226"></q2-stepper-pane>
</div>
</q2-stepper-pane>
</q2-stepper-vertical>If, when one of your child steps is selected, you would like to also see the content of the parent step, you can use the show-with-children attribute.
currentStepIdcurrent-step-idThe id of the currently selected q2-stepper-pane.
The q2-stepper-vertical element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the selected step changes.
{ selectedStep: HTMLQ2StepperPaneElement; selectedStepId: string; currentStepId: string; }If an event handler is bound to the element using:
onchange property - The default handler will not fire, and the value must be updated in the custom handler.addEventListener("change") method - The default handler will fire alongside the custom handler.The q2-stepper-vertical element exposes methods that can be used to perform various actions on the component.
A method to select a step corresponding with the step id.
selectStep(stepId: string) => Promise<void>Initial Release
The following CSS variables are available to override the default theme styles of the q2-stepper-verticalcomponent.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!