Stepper ​

KStepper - An ordered Stepper component

1. And a 1
2. And a 2
3. And a 1 2 3 4

<KStepper :steps="steps" />

Props ​

steps ​

An array of step objects. Each step object should have a required label property, and an optional state property.

<KStepper :steps="[
    { label: 'Step  a long long long long time ago', state: 'completed' },
    { label: 'in a galaxy far far away', state: 'completed' },
    { label: 'Kongponents were battling in space and', state: 'pending' },
    { label: 'fighting robots and space monsters with lots of explosions' }
  ]"
/>

Properties ​

• label (required) - the text displayed beneath the step
• state - the state of the step controls the icon, we support: completed, pending, and error. If a state property is not provided, it will show the default grey icon.

States ​

A step with a state of completed results in a filled-in divider.

[
  { label: 'A completed step', state: 'completed' },
  { label: 'End' }
]

active, pending, and error states will bold the label, because these 3 states indicate the "current" step. completed indicates past steps, while default indicates future steps.

[
  { label: 'An active step', state: 'active' },
  { label: 'End' }
]

[
  { label: 'A pending step', state: 'pending' },
  { label: 'End' }
]

[
  { label: 'An erroneous step', state: 'error' },
  { label: 'End' }
]

The last step will never have a following divider.

[{ label: 'A default step' }]

maxLabelWidth ​

The width of step labels (default is 170px). We support numbers (will be converted to px), auto, and percentages (e.g. 25%) for values.

1. Step a long long long long time ago
2. in a galaxy far far away
3. Kongponents were battling in space and
4. fighting robots and space monsters with lots of explosions

<KStepper :steps="steps" max-label-width="100" />

Theming ​

An example of theming the stepper:

Note: We are scoping the overrides to a wrapper in this example

<template>
  <div class="k-stepper-wrapper">
    <KStepper :steps="steps" />
  </div>
</template>

<style lang="scss">
.k-stepper-wrapper {
  --KStepIconSize: 40px;
  --KStepDividerColorCompleted: green;
  --KStepDividerColorDefault: lightgrey;
  --KStepActiveColor: slateblue;
  --KStepCompletedColor: green;
  --KStepDefaultColor: lightgrey;
  --KStepErrorColor: red;
  --KStepPendingColor: sandybrown;
}
</style>