【问题标题】:How can I add a label on the right side in Vuetify Navigation Drawer如何在 Vuetify Navigation Drawer 的右侧添加标签
【发布时间】:2020-04-27 05:38:03
【问题描述】:

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

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

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

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

【问题讨论】:

标签: vuetify.js


【解决方案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,
    }
  },
})

【讨论】:

    猜你喜欢
    • 2019-01-09
    • 2020-04-16
    • 1970-01-01
    • 2021-02-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多