Vuetify v-spacer no está funcionando con v-tabs.

Necesito colocar el logo en el lado izquierdo de la barra de navegación y las pestañas en el lado derecho. Utilizo v-space para hacerlo, pero no funciona. Lo he comprobado y funciona correctamente con v-btn, pero no con v-tabs. Utilizo Vue 2 y Vuetify 2.6:

App.vue

<template> <v-app> <v-main> <navbar></navbar> <router-view></router-view> </v-main> </v-app> </template>

Navbar.vue

<template> <v-app-bar app="" dense="" dark=""> <v-img alt="Vuetify Logo" class="shrink mr-2" contain="" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40"></v-img> <v-spacer></v-spacer> <v-tabs> <v-tab>Project</v-tab> <v-tab>Users</v-tab> <v-tab>Settings</v-tab> </v-tabs> </v-app-bar> </template>

Esto es lo que conseguí:

Quería que el menú (pestañas) se alineara a la derecha. ¿Por qué no funciona v-spacer aquí? También he comprobado este tema https://github.com/nuxt-community/vuetify-module/issues/165 pero tampoco resuelve el problema.

davy.ai

June 5, 2023 at 3:16 am

Para alinear las pestañas a la derecha de la barra de navegación y tener el logotipo a la izquierda, puede agregar la propiedad class="ml-auto" al componente v-tabs. Esto aplicará una propiedad margin-left de auto, que empujará las pestañas hacia el lado derecho de la barra de navegación.

Aquí está el archivo Navbar.vue modificado:

<template>
  <v-app-bar app="" dense="" dark="">
    <v-img alt="Vuetify Logo" class="shrink mr-2" contain="" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40"></v-img>
    <v-spacer></v-spacer>
    <v-tabs class="ml-auto">
      <v-tab>Projecto</v-tab>
      <v-tab>Usuarios</v-tab>
      <v-tab>Configuración</v-tab>
    </v-tabs>
  </v-app-bar>
</template>

Esto debería resultar en que el logotipo se muestre a la izquierda y las pestañas se muestren en el lado derecho de la barra de navegación.

Si esto aún no funciona, puede intentar agregar las clases flex-grow-1 y flex-shrink-1 al componente v-tabs. Esto debería obligar a v-tabs a expandirse y ocupar todo el espacio restante a la derecha del logotipo.

<v-tabs class="flex-grow-1 flex-shrink-1 ml-auto">
  <v-tab>Projecto</v-tab>
  <v-tab>Usuarios</v-tab>
  <v-tab>Configuración</v-tab>
</v-tabs>

¡Espero que esto ayude!

Answer

davy.ai

June 5, 2023 at 3:16 am
Para alinear las pestañas a la derecha de la barra de navegación y tener el logotipo a la izquierda, puede agregar la propiedad class="ml-auto" al componente v-tabs. Esto aplicará una propiedad margin-left de auto, que empujará las pestañas hacia el lado derecho de la barra de navegación.

Aquí está el archivo Navbar.vue modificado:
```
<template>
  <v-app-bar app="" dense="" dark="">
    <v-img alt="Vuetify Logo" class="shrink mr-2" contain="" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40"></v-img>
    <v-spacer></v-spacer>
    <v-tabs class="ml-auto">
      <v-tab>Projecto</v-tab>
      <v-tab>Usuarios</v-tab>
      <v-tab>Configuración</v-tab>
    </v-tabs>
  </v-app-bar>
</template>
```
Esto debería resultar en que el logotipo se muestre a la izquierda y las pestañas se muestren en el lado derecho de la barra de navegación.

Si esto aún no funciona, puede intentar agregar las clases flex-grow-1 y flex-shrink-1 al componente v-tabs. Esto debería obligar a v-tabs a expandirse y ocupar todo el espacio restante a la derecha del logotipo.
```
<v-tabs class="flex-grow-1 flex-shrink-1 ml-auto">
  <v-tab>Projecto</v-tab>
  <v-tab>Usuarios</v-tab>
  <v-tab>Configuración</v-tab>
</v-tabs>
```
¡Espero que esto ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Vuetify v-spacer no está funcionando con v-tabs.

Answer

davy.ai