Skip to content

Instantly share code, notes, and snippets.

@dillingham
Last active October 27, 2021 15:18
Show Gist options
  • Save dillingham/9c93871c10c30142cddc33671996ba35 to your computer and use it in GitHub Desktop.
Save dillingham/9c93871c10c30142cddc33671996ba35 to your computer and use it in GitHub Desktop.
tailwind & vue stepper

Usage

stepper

<steps :steps="3" :step="step"></steps>

<div v-if="step == 1"></div>
<div v-if="step == 2"></div>
<div v-if="step == 3"></div>
<script>
export default {
  data() {
    return {
      step: 1
    };
  },
  methods: {
    doSomething() {
      this.step = 2;
    }
  }
};
</script>
<template>
<div class>
<div class="bg-grey-light h-1"></div>
<div class="flex">
<div class="flex-1" v-for="s in steps" :key="s">
<div
v-if="step >= s"
class="bg-blue -mt-1 h-1"
:class="{ 'w-1/2': step == s, 'w-full': step < s }"
></div>
<div
class="-mt-3 mx-auto rounded-full h-5 w-5"
:class="{ 'bg-blue': s <= step, 'bg-grey-light': step != s }"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["steps", "step"]
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment