Steps

Lead the user through a series of tasks in a specific order.

Examples

Steps

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseStep } from '@point-hub/papp'

const items = ref([
  {
    label: 'Step 1',
    active: true
  },
  {
    label: 'Step 2',
    active: false
  },
  {
    label: 'Step 3',
    active: false
  }
])
</script>

<template>
  <component :is="BaseStep" v-model="items" show-label></component>
</template>

Icon

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseStep } from '@point-hub/papp'

const items = ref([
  {
    label: 'Step 1',
    active: true,
    icon: 'i-far-user'
  },
  {
    label: 'Step 2',
    active: true,
    icon: 'i-far-map'
  },
  {
    label: 'Step 3',
    active: false,
    icon: 'i-far-file-lines'
  }
])
</script>

<template>
  <component :is="BaseStep" v-model="items" show-label></component>
</template>

Steps API

Types

export interface BaseStepItemInterface {
  label: string
  active: boolean
  icon?: string
  [key: string]: any
}

Props

Name	Type	Default	Description
v-model	BaseStepItemInterface[]		v-model is required.
showLabel	boolean	true	if true item label is shown.

Event

@choosen(item: BaseStepItemInterface) Event for clicked step.