AisSteps

The AisSteps utilizes a group of AisStep components to guide users through processes of a desired task. It is used to show which step in the process is currently active and to provide a clickable path to the previous and next steps.

Use the steps prop to pass an array of step objects. The step object can have the following attributes:

{ step: 1, label: 'Step 1', labelIcon: 'user', description: 'Some longer text about the step' (optional) },

Step, Label, and Description

The step prop is the text displayed inside the step circle. The label prop sets the text displayed below the step. The description prop sets the text that will be displayed below the label. There are also other helper props: label-icon, label-class, description-class

1. 1

   Profile

   Set up your profile
2. 2

   Product

   Choose a product
3. 3

   Billing

   Set up your billing
4. 4

   Done

   You are done

<template>
  <AisSteps v-model="current" :steps="steps" variant="primary" @click="handleClick"/>
</template>

<script setup>
import { ref } from "vue";
import { AisSteps } from '@ais-public/ais-components';

const current = ref(3)

const steps = [
  { step: '1', label: 'Profile', labelIcon: 'user', description: 'Set up your profile' },
  { step: '2', label: 'Product', labelIcon: 'search', description: 'Choose a product' },
  { step: '3', label: 'Billing', labelIcon: 'money', labelClass: 'text-success font-bold', description: 'Set up your billing' },
  { step: '4', label: 'Done', labelIcon: 'confirm', description: 'You are done', descriptionClass: 'font-bold text-primary animate-pulse' },
]
const handleClick = (e) => {
  console.log('steps.clicked', e)
}

</script>

Slots

The following slots are exposed:

• default: slot for customizing the entire step element
• step: the slot for what is inside of the step
• label: the slot for customizing the label
• description: the slot for customizing the description

1. 1

   Profile

   Set up your profile

2. 2

   Product

   Choose a product
3. Billing

   • add payment method
   • add billing address
   • click Purchase

4. 4

   Done

   You are done

<template>
  <AisSteps v-model="current" variant="info">
    <AisStep step="1" label-icon="user" label="Profile" description="Set up your profile"/>
    <AisStep step="2" label-icon="search" label="Product" description="Choose a product"/>
    <AisStep step="3">
      <template #step>
        <div class="info ais-outline p-2 justify-center items-center flex gap-2 border relative rounded-md">
          <AisItemLabel icon="money" label="Billing"/>
        </div>
      </template>
      <template #description>
        <ul>
          <li>add payment method</li>
          <li>add billing address</li>
          <li>click Purchase</li>
        </ul>
      </template>
    </AisStep>
    <AisStep step="4" label-icon="confirm" label="Done" description="You are done"/>
  </AisSteps>
</template>

<script setup>
import { ref } from "vue";
import { AisSteps } from '@ais-public/ais-components';
import { AisStep } from '@ais-public/ais-components';
import { AisItemLabel } from '@ais-public/ais-components';

const current = ref(3)
const search = ref()
</script>

Props

icon

The icon attribute sets the icon that will be appear inside the step. Icon prop will override step prop.

1. Profile

   Set up your profile
2. Product

   Choose a product
3. Billing

   Set up your billing
4. Done

   You are done

<template>
  <AisSteps v-model="current" :steps="steps" variant="primary"/>
</template>

<script setup>
import { ref } from "vue";
import { AisSteps } from '@ais-public/ais-components';

const current = ref(3)

const steps = [
  { step: '1', icon: 'user', label: 'Profile', labelIcon: 'user', description: 'Set up your profile' },
  { step: '2', icon: 'search', label: 'Product', labelIcon: 'search', description: 'Choose a product' },
  { step: '3', icon: 'money', label: 'Billing', labelIcon: 'money', description: 'Set up your billing' },
  { step: '4', icon: 'confirm', label: 'Done', labelIcon: 'confirm', description: 'You are done' },
]

</script>

variant

variant conveys the type of content being presented. The accepted values are: default, primary, secondary, info, success, warning, danger. The default value is default.

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

1. 1

   Hello

   Nice to meet you!
2. 2

   This
3. 3

   Is
4. 4

   Goodbye

   See you soon

<template>
  <div class="flex gap-10 items-center justify-center">
    <AisField label="Variant" class="grow">
      <AisSelect v-model="variant" :options="variants"/>
    </AisField>
  </div>
  <AisSteps v-model="current" :steps="steps" :variant="variant"/>
</template>

<script setup>
import { AisSteps } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { faHeart, faMusic } from '@fortawesome/free-solid-svg-icons';

import { variants } from '@ais-public/ais-components';
import { ref } from "vue";

const variant = ref('default')
const current = ref(2)

const steps = [
  { step: '1', label: 'Hello', description: 'Nice to meet you!', labelIcon: '' },
  { step: '2', label: 'This', description: '', labelIcon: faHeart },
  { step: '3', label: 'Is' },
  { step: '4', label: 'Goodbye', description: 'See you soon', labelIcon: faMusic },
]

</script>

size

size sets the size of the step. The accepted values are: xs, sm, md, lg. The default value is md.

Variant

xssmmdlg

1. 1

   Beginning
2. 2

   Middle
3. 3

   End

<template>
  <div class="flex gap-10 items-center justify-center">
    <AisField label="Variant" class="grow">
      <AisSelect v-model="size" :options="['xs', 'sm', 'md', 'lg']"/>
    </AisField>
  </div>
  <AisSteps v-model="current" :steps="items" :size="size" variant="primary"/>
</template>

<script setup>
import { ref } from "vue";
import { AisSteps } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';

const size = ref('md')
const current = ref(2)

const items = [
  { step: '1', label: 'Beginning', labelIcon: '', description: '' },
  { step: '2', label: 'Middle', labelIcon: '', description: '' },
  { step: '3', label: 'End', labelIcon: '', description: '' },
]

</script>

vertical

Setting vertical to true will display the steps vertically. The default value is false.

Vertical

1. 1

   Eat

   This is important
2. 2

   Sleep
3. 3

   Repeat

<template>
  <div class="grid gap-y-10 h-full">
    <AisToggle v-model="vertical" label="Vertical" />
    <AisSteps v-model="current" :steps="items" variant="success" :vertical="vertical"/>
  </div>
</template>

<script setup>
import { AisSteps } from '@ais-public/ais-components';
import { AisToggle } from '@ais-public/ais-components';
import { faBed, faCookie } from '@fortawesome/free-solid-svg-icons';

import {ref} from "vue";

const vertical = ref(true)
const current = ref(2)

const items = [
  { step: '1', label: 'Eat', labelIcon: faCookie, description: 'This is important' },
  { step: '2', label: 'Sleep', labelIcon: faBed, description: '' },
  { step: '3', label: 'Repeat', labelIcon: 'redo', description: '' },
]

</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
modelValue	Number		1	v-model prop. Used in conjunction with the event @update:modelValue	false
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background.	false
size	String		'md'	The size of each step Valid values: xs, sm, md, lg	false
step	String		'value'	The attribute of the step to display in the step circle	false
steps	Array		[]	Collection of step objects. Attributes on a step object: `value`, `label`, `icon`, `description`	false
variant	String		'default'	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false
vertical	Boolean		false	Toggles whether the steps are shown vertically or horizontally Valid values: true, false	false

Slots

Name	Scoped	Description
default

Events

Event	Arguments	Description
change
click
update:modelValue