如何在 Vuetify Navigation Drawer 的右侧添加标签

Question

我喜欢在菜单的右侧添加一个标签，就像在 Vuetify 文档页面上一样。

我尝试使用v-label，但无法将其放在右侧。

查看了Vuetify页面的代码，没有找到解决办法。

执行此操作的正确代码是什么？

Answer 1

可以在导航抽屉内添加一个标签

只需要使用v-chip组件并使用样式向右移动即可。

这是一个有效的代码笔：https://codepen.io/chansv/pen/wvKdReR?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-card
      height="400"
      width="256"
      class="mx-auto"
    >
      <v-navigation-drawer permanent>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">
              Application
            </v-list-item-title>
            <v-list-item-subtitle>
              subtext
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list
          dense
          nav
        >
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}
              <v-chip v-if="item.new" style="float: right;" color="primary" x-small>
                  new
                </v-chip>

              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        { title: 'Dashboard', icon: 'mdi-view-dashboard' },
        { title: 'Photos', icon: 'mdi-image' },
        { title: 'About', icon: 'mdi-help-box', new: true },
      ],
      right: null,
    }
  },
})