# Steps

Stepper component increasing dynamically on click. Used to guide user through defined path.

# Most common usage scenario

<template>
  <SfSteps v-model="active" :steps="steps" :can-go-back="canGoBack">
    <SfStep v-for="(step, key) in steps" :key="key" :name="step">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 18.75rem;
          background-color: #f2f2f2;
        "
      >
        [#default slot content] {{ step }}
      </div>
    </SfStep>
  </SfSteps>
</template>
<script>
import { SfSteps } from "@storefront-ui/vue";
export default {
  components: {
    SfSteps,
  },
  data() {
    return {
      active: 0,
      steps: ["Details", "Shipping", "Payment", "Review"],
      canGoBack: true,
    };
  },
};
</script>

# Props

  • active

    • Current active step
    • type: number
    • defaultValue: 0
  • canGoBack

    • Disable clicking on a past step
    • type: boolean
    • defaultValue: true

# Slots

  • steps

    • Use this slot to customise the steps
    • bindings: step-click, step
  • default

# Events

  • 'change'
    • Active step changed event

# CSS modifiers

None.

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --steps-step-color
  • --steps-step-cursor
  • --step-font
  • --font-weight--normal
  • --steps-border-width
  • --steps-step-padding
  • --step-font
  • --font-size--base
  • --steps-step-after-background

You can override CSS variables values bound to this component.

# Internal components

# Step

# Props

  • name
    • Name of the step
    • type: string
    • defaultValue: ""

# Slots

  • default
    • bindings: index

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.