Vuetify: v-navigation-drawer
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
Pero seguía obteniendo esto
Por favor avise.
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 delv-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 propiedadbackground-color
para establecer el color del drawer y la propiedadopacity
para ajustar el nivel de transparencia.Aquí tienes un ejemplo de cómo podrías modificar el código para lograr el resultado deseado:
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.