javascript - 使用 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>

标签： javascriptvue.jsvuejs2vuetify.js

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>

现场演示