CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Luca Rossi
Luca Rossi

Reputation: 776

Remove v-stepper-header number using Vuetify

I search everywhere trying resolve this problem and didn't find any solution. There is any way to remove the numbers from the v-steppper-header ? - Vuetify version: 1.5.6

Current: enter image description here

Exptected:

enter image description here

Upvotes: 4

Views: 2819

Answers (4)

Yan Silva
Yan Silva

Reputation: 1

.theme--light.v-stepper .v-stepper__step:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error) .v-stepper__step__step {
    display: none;
}

Upvotes: 0

Anjayluh
Anjayluh

Reputation: 1786

I have found a temporary way to handle this stuation. It is not ideal but it gives the desired result as of now. And this is by giving the font a transparent color so it takes up the background color. This leaves the step functionality on without displaying the step number

.v-stepper__step--active:not(.v-stepper__step--complete) .v-stepper__step__step {
    color: transparent;
}

Upvotes: 0

Arren Propster
Arren Propster

Reputation: 25

The solution above will cause problems for active/inactive classes and step identification. The less problematic solution I found today is below

.your-stepper-selector ::v-deep .v-stepper__step__step{ font-size: 0 }

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Set the step prop to empty string "" as follows :

  <v-stepper-step :complete="e1 > 1" step="" complete>Name of step 1</v-stepper-step>

Upvotes: 5

Related Questions