在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

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

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

  

对于三行列表，字幕将垂直固定在两行，然后省略号。如果您需要3行以上，建议使用card。

v-list的目的是在重复元素中强制高度一致，因此，如果需要多于三行来传达特定点，则使用可以覆盖更多区域并重复使用的重复卡片元素可能是有意义的案例。