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

Question

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>

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

Answer 1

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

除此之外，建议您使用卡：

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

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