Vue, Vuetify - Réduire l'espace entre les boutons de la barre d'outils

Question

J'ai tout essayé pour réduire l'espace entre les boutons, afin qu'ils soient tous bien centrés et espacés de manière égale dans la barre d'outils lorsqu'on est sur un mobile, mais pour une raison quelconque, l'espace à côté du bouton le plus à gauche reste, alors que le bouton le plus à droite est légèrement au-dessus du bord droit, comme on le voit sur l'image ci-dessous.

Voici la dernière chose que j'ai essayée avant de venir poser une question ici :

<!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere -->
<v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0">
    <v-toolbar-items class="ma-0 pa-0">
        <v-btn 
            flat 
            v-for="link in navigation" 
            :key="link.text" 
            :class="{ 'teal lighten-2':link.active }" 
            @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
            class="mobile ma-0 pa-0"
        >
            <v-icon>{{ link.icon }}</v-icon>
        </v-btn>
    </v-toolbar-items>
</v-toolbar>

J'ai également essayé des choses comme la création d'une règle de style personnalisée (non scopée, sinon Vuetify semble les ignorer) du genre .v-btn.mobile { margin:0; padding:0 } en vain, et en essayant toutes les différentes justify- attributs.

En dehors de cela, j'ai également essayé différents éléments de Vuetify comme v-footer et en ajoutant v-container s, v-layout et v-flex s. Aucun d'entre eux ne semble fonctionner.

L'image est une capture d'écran de mon téléphone, alors que je suis connecté au serveur de développement Vue sur mon ordinateur, sur le même réseau, au cas où cela ferait une différence.

Answer 1

Le rembourrage provient de la .v-toolbar__content élément créé par vuetify.
Malheureusement, Vuetify ne fournit pas de moyen direct de se débarrasser de ce rembourrage.

Cependant, vous pouvez facilement remplacer cette fonction par un style personnalisé :

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-toolbar-items>
    <v-btn 
      flat 
      v-for="link in navigation" 
      :key="link.text" 
      :class="{ 'teal lighten-2':link.active }" 
      @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
      class="mobile"
      >
      <v-icon>{{ link.icon }}</v-icon>
    </v-btn>
  </v-toolbar-items>
</v-toolbar>

Avec le style suivant (en supposant que vous utilisez du css simple)

<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
}
</style>

Vous avez raison, vous ne pouvez pas donner un style aux éléments générés par Vuetify directement, mais vous pouvez conserver l'attribut scoped en utilisant sélecteurs profonds
(le >>> dans l'exemple, vous devrez peut-être utiliser /deep/ o ::v-deep si vous utilisez un préprocesseur css)

Edit : Pour le centrage et l'étirement des boutons, il suffit de supprimer l'option v-toolbar-items et donner aux boutons le block et l'attribut fill-height classe, par exemple :

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    block
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

Si vous souhaitez uniquement centrer les éléments, vous pouvez utiliser quelque chose comme ceci :

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height ma-0"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

<!-- with the following style: -->
<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
  justify-content: center;
}
</style>