1
votes

Comment supprimer le remplissage de l'élément de liste dans Vuetify

Lors du codage du projet Vue avec vuetify, j'ai trouvé qu'il y avait un remplissage inutile dans la balise , en détail, il s'agit de code > tag.

image: https://segmentfault.com/img/bVbtemC? w = 890 & h = 1288

  Il y a un élément de liste parent et un élément de liste enfant, et il y a un espace de remplissage à gauche et à droite. 
  J'ai suivi officiel méthodes pour définir  class = "pa-0" , cependant, cela ne fonctionne pas lorsque j'ajoute cette classe à toutes les balises autour. 
  Et bien sûr, définir directement CSS ne fonctionne pas fonctionne aussi, l'image ci-dessus montre que la balise cible est celle avec  class = "v-list__tile" , mais le CSS sur cette classe ne fonctionne toujours pas. 
   <v-navigation-drawer width="200px" stateless value="true"
    class="transparent">
    <v-list subheader dense expand>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-tile class="pa-0">
            <v-icon left>home</v-icon>
            <v-list-tile-title>menu-name-m</v-list-tile-title>
          </v-list-tile>
        </template>

        <v-list-tile class="pa-0" @click="onMenuCliked">
          <v-list-tile-title>no child - menu-name</v-list-tile-title>
        </v-list-tile>

      </v-list-group>
    </v-list>
  </v-navigation-drawer>

vue.js vuetify.js

1 commentaires

> mais le CSS sur cette classe ne fonctionne toujours pas. stackoverflow.com/questions/50985783/...

3 Réponses :

1
votes

v-list-item rend le html suivant

<v-list-tile class="my-tile">

.my-tile .v-list__tile {
  padding: 0  
}

Ainsi, la définition de la classe l'ajoute au div parent, au lieu de v-list__tile - qui est le div réellement avec le remplissage.
Parfois vuetify pour contourner cela utilise à la place le prop content-class , mais ce composant ne semble pas le prendre en charge, vous devez donc le cibler par css, par exemple

.v-list__tile {
  padding: 0  
}

0 commentaires

0
votes

La V-list n'ajoute que le remplissage à gauche, vous pouvez donc simplement le supprimer sans mettre tous les bourrages à 0.

Pour supprimer le remplissage à gauche seulement, vous pouvez simplement ajouter la classe 'pl-0' à votre v-list tuile.

<v-list-tile class="pl-0">

En savoir plus sur l'espacement ici.

0 commentaires

0
votes

La façon dont j'ai résolu un problème similaire est d'ajouter ceci dans le style:

<style scoped lang="scss">
::v-deep .v-list-item {
  padding: 0;
}

0 commentaires