web-dev-qa-db-fra.com

Réglage de la hauteur de la tuile v-list dans Vuetify

CodePen

La section pertinente est:

<v-list-tile>
  <v-list-tile-content>
    <div>
      This is some content that's a little tall.<br />
      Maybe there's a lot of stuff that goes here.<br />
      Or maybe I'm using a third party control.<br />
      Either way, how can I adjust the height?
    </div>
  </v-list-tile-content>
</v-list-tile>

J'ai un menu Vuetify qui contient une liste. Un des éléments de la liste est plus grand que le 48px défini dans les styles de base. Y a-t-il un moyen de régler cela gracieusement dans le balisage? Ou dois-je utiliser css pour ajuster?

vue.jsvuetify.js
4
Mike Cole

Selon la documentation, vous pouvez augmenter la taille des éléments dans <v-list> avec two-line ou three-line

Au-delà, il est conseillé d’utiliser une carte:

Pour les listes de trois lignes, le sous-titre sera bloqué verticalement sur 2 lignes, puis sur Ellipsis. Si vous avez besoin de plus de 3 lignes, il est conseillé d’utiliser une carte .

Le but de v-list est de forcer l'uniformité de hauteur dans les éléments répétés. Ainsi, si vous avez besoin de plus de trois lignes pour transmettre un point particulier, il est probablement judicieux d'utiliser un élément de carte répétitif pouvant couvrir plus de surfaces et de cas d'utilisation.

2
KyleMit