在Vuetify中调整v-list-tile的高度

Mik*_*ole 7 vue.js vuetify.js

CodePen

相关部分是:

<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>
Run Code Online (Sandbox Code Playgroud)

我有一个包含列表的Vuetify菜单.其中一个列表项比基本样式中的48px设置高.有没有办法在标记中优雅地调整它?或者我需要使用CSS来调整?

Kyl*_*Mit 8

根据文档,您可以<v-list>使用two-line或增加项目的大小three-line

除此之外,建议您使用卡:

对于三行列表,副标题将垂直夹在 2 行然后省略号。如果需要3条以上线路,建议使用

v-list 的目的是强制重复元素的高度统一,所以如果你需要超过三行来表达一个特定的点,使用可以覆盖更多区域和用例的重复卡片元素可能是有意义的。