使用Vuetify.js的右上菜单

Question

我才刚开始学vue。我想要创建一个水平的右上角菜单使用Vuetify。

但是我已经记下了垂直菜单。在Vuetify文档中没有这样的例子。最常用的菜单没有确切的实现。我如何配置它使其水平？

这是模板

<v-app>
  <v-app-bar
    app
    color="primary"
    light
  >
    <v-navigation-drawer
      v-model="drawer"
      right
      width="500"
    >
      <v-list
        nav
        dense
        max-width="240"
      >
        <v-list-item-group>
          <v-list-item>
            <v-list-item-title>Log in</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>Sign in</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-spacer />
  </v-app-bar>
</v-app>

Answer 1

如果您想要创建一个在右侧水平对齐某些项的栏，您可以简单地这样做：

<v-app-bar color="deep-purple accent-4" dense dark>

        <v-spacer></v-spacer>

        <v-btn text>
          Log in
        </v-btn>
        <v-btn text>
          Sign in
        </v-btn>
</v-app-bar>

现场演示