Cómo cambiar el tamaño del icono v-stepper dentro de los pasos?

18 Jul, 2023 Programación 0

Quiero cambiar el tamaño del ícono dentro de los pasos de v-stepper. Pude lograr cambiar el tamaño de los pasos, pero no encuentro una forma de cambiar el tamaño del ícono.

<v-stepper v-model="final_step" alt-labels="" elevation="0" :width="GetStepperWidth()">
  <v-stepper-header>
    <template v-for="(step, index) in steps">
      <v-stepper-step :color="GetStepColor(index + 1)" :complete-icon="GetCompleteIcon(index + 1)" style="" :key="`${index + 1}-step`" :complete="final_step > index" step="">
        <span :class="GetTextColor(index + 1)">{{ GetTextDescription(step) }}</span>
      </v-stepper-step>

      <v-divider :class="GetStepperLineClass(index + 1)" v-if="index + 1 !== steps.length" :key="index"></v-divider>
    </template>
  </v-stepper-header>
</v-stepper>

Como puedes ver, obtengo el :complete-icon de una llamada a una función. Entonces, devuelve un string como “mdi-plus”. Pero no hay forma de aumentar el tamaño del ícono…

CSS…

.v-stepper__step__step.success { width: 60px;height: 60px; margin: -14px;} 
.v-stepper__step__step.primary {width: 60px;height: 60px;margin: -14px; } 
.v-stepper__step__step.grey {width: 60px;height: 60px;margin: -14px;}

Este es mi stepper: Enlace a la imagen

.v-stepper__step__step .v-icon.success .v-icon__font { font-size: 24px; } .v-stepper__step__step .v-icon.primary .v-icon__font { font-size: 24px; } .v-stepper__step__step .v-icon.grey .v-icon__font { font-size: 24px; }

Answer

davy.ai

July 18, 2023 at 9:36 pm
Para cambiar el tamaño del icono dentro de los pasos de v-stepper, puedes utilizar CSS para establecer la propiedad font-size del complete-icon.

Primero, selecciona v-stepper-step y complete-icon utilizando selectores CSS. Luego, establece la propiedad font-size al tamaño deseado.

Aquí tienes un ejemplo de código CSS que establece el font-size del complete-icon a 24px:
```
.v-stepper__step__step .v-icon.success .v-icon__font {
  font-size: 24px;
}

.v-stepper__step__step .v-icon.primary .v-icon__font {
  font-size: 24px;
}

.v-stepper__step__step .v-icon.grey .v-icon__font {
  font-size: 24px;
}
```
Puedes ajustar el valor de font-size al tamaño deseado. Recuerda reemplazar los nombres de clase de CSS con los nombres de clase apropiados basados en las cadenas complete-icon devueltas por la función GetCompleteIcon.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo cambiar el tamaño del icono v-stepper dentro de los pasos?

Answer

davy.ai