Questions tagged [v-stepper]

11 questions
11
votes
4 answers

VuetifyJS: how to get rid of the v-stepper component elevation?

When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges: I want to remove it. I tried to set the elevation to 0 but it did not work. Codepen How…
Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
10
votes
2 answers

Dynamically integrate Vuetify v-stepper with Vue router

I would like to integrate vuetify's v-stepper with vue router. My requirements are as follows: Each step has its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Each step is component on its own which is dynamically loaded…
Frank
  • 1,374
  • 2
  • 16
  • 34
2
votes
2 answers

How to change the v-stepper icon size inside the steps?

I want to change the Icon size inside the v-stepper steps. I could manage to change the step sizes. But cannot find a way to change the icon size.
1
vote
1 answer

VuetifyJS: How to make v-stepper-header sticky on scroll

I'm looking for a way to make the component sticky on scroll. I've tried to create custom CSS but didn't succeed. Here's a sample code.
Carol-Theodor Pelu
  • 906
  • 2
  • 10
  • 26
0
votes
1 answer

How to share data variables between child components

I have parent component addUser.vue and it contains v-stepper and I want to refactor v-stepper-content into couple of child components StepperOne.vue, StepperTwo.vue, StepperThree.vue like this adddUser.vue
Killian Pierce
  • 121
  • 3
  • 12
0
votes
1 answer

Vuetify.js: how to cancel v-stepper-step header click when active form is invalid

I'm using a v-stepper from Vuetify. What I want is: when the user click on a stepper step (in the header) I block the click event if the active form isn't valid I've managed to do so but by setting the click listener on the span…
Cyril F
  • 1,842
  • 2
  • 19
  • 35
0
votes
1 answer

Vue: triggering a method when choosing another step in the stepper

Let us say that we have following steps in the stepper: Home > Purchase > Comments > Settings Template: