Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

enter image description here

I want to remove it. I tried to set the elevation to 0 but it did not work.

<v-stepper v-model="e1" class="elevation-{0}">

Codepen

How to achieve this?

like image 383
Billal Begueradj Avatar asked Feb 03 '23 21:02

Billal Begueradj


2 Answers

Not elevation-{0}, but elevation-0.
Elevation docs:

You can set an element's elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.

So actually you need to remove parentheses as well.
Should be clear because you can't use parentheses in class names as far as I know.

like image 95
Traxo Avatar answered Feb 06 '23 14:02

Traxo


just put the following

<v-stepper v-model="e1" class="elevation-0">
like image 38
Yair_May Avatar answered Feb 06 '23 15:02

Yair_May