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.

Vuetify: v-navigation-drawer

18 Jul, 2023 Programación

Tengo

<v-navigation-drawer v-model="drawer" app class="blue darken-5">
    <v-list>
        <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-tile-action>
                <v-icon class="white--text">{{ link.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
                <v-list-tile-title class="white--text"> {{ link.text }} </v-list-tile-title>
            </v-list-tile-content>
        </v-list-tile>
    </v-list>
</v-navigation-drawer>

Esperaba obtener algo como esto

enter image description here

Pero seguía obteniendo esto

enter image description here

Por favor avise.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según el fragmento de código proporcionado, parece que el problema podría estar en las clases CSS que se están utilizando para el componente v-navigation-drawer.

    La clase class="blue darken-5" podría estar anulando el estilo predeterminado del v-navigation-drawer, por lo que aparece como un color azul sólido sin transparencia.

    Para solucionar esto, podrías intentar eliminar el atributo class="blue darken-5" y agregar tu propio CSS personalizado para estilar el drawer como deseas. Por ejemplo, podrías usar la propiedad background-color para establecer el color del drawer y la propiedad opacity para ajustar el nivel de transparencia.

    Aquí tienes un ejemplo de cómo podrías modificar el código para lograr el resultado deseado:

    <v-navigation-drawer v-model="drawer" app="">
  <v-list>
    <v-list-tile v-for="link in links" :key="link.text" router="" :to="link.route">
      <v-list-tile-action>
        <v-icon>{{ link.icon }}</v-icon>
      </v-list-tile-action>
      <v-list-tile-content>
        <v-list-tile-title>{{ link.text }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

// CSS personalizado
<style>
  .v-navigation-drawer {
    background-color: rgba(0,0,255,0.5); // establece el color azul con un 50% de transparencia
  }
</style>

    Ten en cuenta que es posible que debas ajustar los valores del CSS para lograr el aspecto exacto que deseas, pero esto debería darte una idea de cómo personalizar el estilo del drawer.

Comments are closed.