es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mostrar el v-progress-liner verticalmente.

13 Jul, 2023 Programación

Hola, ¿alguien podría ayudarme? Estoy tratando de hacer una barra de progreso de forma vertical, pero se muestra de forma horizontal.

<v-progress-linear class="bar" :value="20"></v-progress-linear>

.bar {
    width: 100%;
    display: block;
    font-family: arial;
    font-size: 12px;
    background-color: #bb9319;
    color: #fff;
    position: absolute;
    bottom: 0;
}
Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que v-progress-linear se muestre de forma vertical en lugar de horizontal, puedes utilizar la propiedad rotate. Aquí tienes un ejemplo:

    <v-progress-linear class="bar" :value="20" :rotate="90"></v-progress-linear>

.bar {
  height: 100%;
  display: block;
  font-family: arial;
  font-size: 12px;
  background-color: #bb9319;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
}

    Al añadir :rotate="90", la barra de progreso se girará 90 grados en sentido de las agujas del reloj, por lo que se mostrará de forma vertical. También deberás cambiar la propiedad width por height en el CSS de .bar para que ocupe el espacio vertical. Por último, ajusta las propiedades de posicionamiento para que se muestre como deseas.

Comments are closed.