Vuetify 多行标签

Question

我是 unsg Vuetify 为我的 web 应用程序创建布局。 我在页面顶部使用选项卡式导航并希望获得所需的效果

我尝试过使用各种方法，例如将每一行包装在 div、p 标记中，还尝试使用诸如 and 之类的排版标记，但文本总是在同一行结束。

有任何想法吗？

这是我现有的代码：

<v-app-bar color="primary" dark app dense flat>
  <v-tabs>
    <v-tab>
      Ticket
    </v-tab>
    <v-tab>
      Ticket
    </v-tab>
    <v-tab :to="{ name: 'Tickets' }">
      Ticket
    </v-tab>
  </v-tabs>

  <v-spacer></v-spacer>
  <v-btn icon>
    <v-icon>mdi-magnify</v-icon>
  </v-btn>
</v-app-bar>

这是我尝试过的东西（省略了一些位以使其更短）

<v-tab>
      <body-2>Title</body-2>
      <caption>another line</caption>
    </v-tab>

Answer 1

Vuetify 通常使用 css flex 到 position 项目。 您最常更改 v-tab 默认插槽的 css flex 属性。 我不确定在 v-tab 本身上设置样式是否有效。