vue.js - 在 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

除此之外，建议您使用卡片:

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. If you need more than 3 lines, it is advised to use a card.

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