Skip to content

Instantly share code, notes, and snippets.

@jonabasque
Last active March 1, 2019 03:04
Show Gist options
  • Save jonabasque/0c428aa0f3139f0876e77f5dc10437ba to your computer and use it in GitHub Desktop.
Save jonabasque/0c428aa0f3139f0876e77f5dc10437ba to your computer and use it in GitHub Desktop.
Vuetify steppers
<v-stepper v-model="step" value="1" vertical>
<v-stepper-step color="teal" :complete="step > 1" step="1" editable>
<small>1. Datos del contrato</small>
</v-stepper-step>
<v-stepper-content step="1">
<!-- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card> -->
<div class="step_buttons">
<v-btn color="teal" @click="step = 1" left><</v-btn>
<v-btn color="teal" @click="step = 2" right>></v-btn>
</div>
</v-stepper-content>
<v-stepper-step color="teal" :complete="step > 2" step="2">
<small>2. Configure analytics for this app</small>
</v-stepper-step>
<v-stepper-content step="2">
<div class="step_buttons">
<v-btn color="teal" @click="step = 2" left><</v-btn>
<v-btn color="teal" @click="step = 3" right>></v-btn>
</div>
</v-stepper-content>
<v-stepper-step color="teal" :complete="step > 3" step="3">
<small>3. Select an ad format and name ad unit</small>
</v-stepper-step>
<v-stepper-content step="3">
<div class="step_buttons">
<v-btn color="teal" @click="step = 3" left><</v-btn>
<v-btn color="teal" @click="step = 4" right>></v-btn>
</div>
</v-stepper-content>
<v-stepper-step color="teal" step="4">
<small>4. View setup instructions</small>
</v-stepper-step>
<v-stepper-content step="4">
<div class="step_buttons">
<v-btn color="teal" @click="step = 3" left><</v-btn>
<v-btn color="teal" @click="step = 0" right>></v-btn>
</div>
</v-stepper-content>
</v-stepper>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment