Skip to content

Latest commit

 

History

History
41 lines (25 loc) · 1.19 KB

StepperVertical.mdx

File metadata and controls

41 lines (25 loc) · 1.19 KB
Raw

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { Default, DarkMode } from './StepperVertical.stories';

StepperVertical

The StepperVertical component is a vertical stepper component that takes in the steps as a prop (Array of Objects). Each step object must include the pathName that will be displayed.

It uses the StepperVerticalItem component to display the step.displayName, and the activeStepIndex prop to highlight the current step.

Clicking on a step emits goToStep and the steo Object to the parent.

default:

dark-mode:

How to Use

The StepperVertical will render its steps according to the steps prop you pass in.

It emits the selected step on-click with the goToStep property and the selected step Object.

To show the dark mode version, use the prop darkMode set to true.

Example of using the component:

<StepperVertical
  :steps="[{ path: '/settings', pathName: 'Choose campaign settings' },
    { path: '/audience', pathName: 'Add target audience' }]"
  :active-step-index="activeStepIndex"
  @stepChange="handleStepChange"
/>

Props