vue-ant-steps

Vue 2 steps/wizard ❤

Demo

⚓ Features

• Zero dependencies
• Typescript support
• Pagination
• Pagination touchable
• Very flexible and customizable

🚚 Install

 yarn add vue-ant-steps  // npm install --save vue-ant-steps

🚀 Usage

Global

import Vue from "vue";
import Steps from "vue-ant-steps";
import "vue-ant-steps.min.css";

Vue.use(Steps);

Local

import { Steps, Step } from "vue-ant-steps";
import "vue-ant-steps.min.css";

export default {
  components: {
    Steps,
    Step,
  },
};

📌 Examples

<Steps>
  <Step name="Foo">
    <div class="first-step">First step</div>
  </Step>
  <Step name="Bar">
    <div class="second-step">Second step</div>
  </Step>
</Steps>

You can customize the title/description in the nav by the slot #title/#description (This removes the use of the prop title/description)

Example:

<Steps>
  <Step>
    <template #title>
        My custom title 🍉
    </template>

    <template #description>
         My custom description 🍉
    <template>

    <div class="first-step">
        First step
    </div>
  </Step>
</Steps>

Steps

Props

Name	type	Default	description
value	number	undefined	The designated model value for the component.
nonLinear	boolean	false	Allow user to jump to any step
height	string - number	undefined	Sets the height for the component.
width	string - number	undefined	Sets the width for the component.
maxHeight	string - number	undefined	Sets the maximum height for the component.
maxWidth	string - number	undefined	Sets the maximum width for the component.
minHeight	string - number	undefined	Sets the minimum height for the component.
minWidth	string - number	undefined	Sets the minimum width for the component.

Events

Name	Description
input	Emitted when tab is changed.

Step

Props

Name	type	Default	description
title	string	'Step'	Set the title in the step item
description	string	undefined	Set the description in the step item

Slots

Name	Description
title	Slot for cutom title in nav
description	Slot for cutom description in nav

🔖 License

MIT