Steps

New

​

<template>
  <div class="w-full">
    <PlSteps ref="stepsEl" v-model="steps" />
    <div class="h-sm my-12">
      <PlSteps ref="stepsEl" v-model="steps" vertical />
    </div>
    <pl-button @click="handleToggleClick">
      toggle to step 2
    </pl-button>
  </div>
</template>

<script setup lang="ts">
import type { StepsInstance, StepsItem } from 'play-ui'
import { ref } from 'vue'

const stepsEl = ref<StepsInstance>()

const handleToggleClick = () => {
  stepsEl.value?.toggle(1, {
    state: 'done',
    result: 'success',
  })
}

const steps = ref<StepsItem[]>([
  {
    name: 'Step 1',
    description: 'This is Step 1',
    icon: 'activity',
    state: 'processing',
  },
  {
    name: 'Step 2',
    description: 'This is Step 2',
    icon: '',
  },
  {
    name: 'Step 3',
    description: 'This is Step 3',
    icon: '',
  },
])
</script>

<template>
  <div class="w-full">
    <PlSteps ref="stepsEl" v-model="steps" />
    <div class="h-sm my-12">
      <PlSteps ref="stepsEl" v-model="steps" vertical />
    </div>
    <pl-button @click="handleToggleClick">
      toggle to step 2
    </pl-button>
  </div>
</template>

<script setup lang="ts">
import type { StepsInstance, StepsItem } from 'play-ui'
import { ref } from 'vue'

const stepsEl = ref<StepsInstance>()

const handleToggleClick = () => {
  stepsEl.value?.toggle(1, {
    state: 'done',
    result: 'success',
  })
}

const steps = ref<StepsItem[]>([
  {
    name: 'Step 1',
    description: 'This is Step 1',
    icon: 'activity',
    state: 'processing',
  },
  {
    name: 'Step 2',
    description: 'This is Step 2',
    icon: '',
  },
  {
    name: 'Step 3',
    description: 'This is Step 3',
    icon: '',
  },
])
</script>