@digitalspace/step-progress-bar

StepProgressBar

To create a step progress bar, insert the following into your markup:

<ds-step-progress-bar [activeStepIndex]="1" [steps]="steps"></ds-step-progress-bar>

activeStepIndex dictates up to which step will be "active". To have no steps active set activeStepIndex to -1.

**Step is a maditory input. This will include the step information. It should be formatted like the following:

  steps = [
    {
      stepText: '1',
      stepSubText: 'Step 1'
    },
    {
      stepText: '2',
      stepSubText: 'Step 2'
    },
    {
      stepText: 3',
      stepSubText: 'Step 3'
    },
    {
      stepText: 4',
      stepSubText: 'Step 4'
    }
  ];

You can also leave both stepText and stepSubText as empty string.

You are able to customize colours by using the following inputs:

<ds-step-progress-bar [activeStepIndex]="1"
  [progressBarColour]="'grey'"
  [progressBarActiveColour]="'blue'"
  [subTextColour]="'grey'"
  [subTextActiveColour]="'blue'"
  [stepTextColour]="'white'"
  [steps]="steps"></ds-step-progress-bar>