## Stepper #### Instructions: Stepper will help guid the user through a series of steps. ##### Example: You will need to import the Stepper inside of whatever component/view it is to be rendered in: ```js import Stepper from '[path-to-components]' ``` After import you will be able to use it and pass various props to the stepper: ```html ``` Additionally you will have to declare the steps in the component/view where you returned the Stepper: ```js const Steps = { 'stepperTest': [ { 'title': (Step Number One), 'optional': (Optional Sub-title), 'content': ([content]) }, { 'title': (Step Number Two), 'optional': (Optional Sub-title), 'content': ([content]) }, { 'title': (Step Number Three), 'optional': (Optional Sub-title), 'content': ([content]) } ] }; ``` ##### Props: | Name | Type | Default | Description | |------|-------|---------|--------------| | steps | data | undefined | Can be used to render steps, better to use JSON | | activeColor | hex code | primary color | Used to override active color | | inactiveColor | hex code | neutral color | Used to override inactive color | | linear | bool | false | Linear forces steps first to last with no ability to skip around | | type | string | horizontal | Horizontal or vertical layout ('horizontal' / 'vertical')| | currentStep | num | 0 | Will start on first step unless specified | | onContinue | func | undefined | Callback for continue | | onBack | func | undefined | Callback for back | ##### Images: ---- #####Horizontal: *This will render component horizontally* ```html ``` ######Light theme: *Theme is automatically appied with global config*  ######Dark theme:*Theme is automatically appied with global cofig*  ---- #####Vertical: *This will render component vertically* ```html ``` ######Light theme: *Theme is automatically appied with global config*  ######Dark theme: *Theme is automatically appied with global config*