Kongponents

# Stepper

KStepper - An ordered Stepper component

  1. Completed
  3. Default 
<KStepper :steps="steps" />

# Props

# steps

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

  1. Completed
  2. Completed
  4. Default 
<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.

  1. Completed
  2. Default 
[
  { label: 'A completed step', state: 'completed' },
  { label: 'End' }
]

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

  2. Default 
[
  { label: 'A pending step', state: 'pending' },
  { label: 'End' }
]
  1. Error
  2. Default 
[
  { label: 'An erroneous step', state: 'error' },
  { label: 'End' }
]

The last step will never have a following divider.

  1. Default 
[{ 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. Completed
  2. Completed
  4. Default 
<KStepper :steps="steps" max-label-width="100" />

← Switch →