登录对话框夹在Vuetify中的工具栏下

Question

我想要一些对话框/面板来放置我的登录表单。顶部工具栏上将有一个登录按钮，单击该工具栏下方将弹出某种类型的非模式对话框，其中包含登录表单和注册链接。像真正的Google入侵一样，可以进行登录。

但是我不知道如何剪辑/显示工具栏下的某些面板。我什至不知道应该使用哪个对角线？我应该看起来像下面这样。我刚刚发现this是他们手动放置它的位置，但是即使我正确放置CSS，它仍然是模态的。

Answer 1

在此示例中，我应该将v-menu与slot =“ activator”一起使用

<template>
  <v-layout row>
    <v-flex xs12 sm6 offset-sm3>
      <v-card height="200px">
        <v-card-title class="blue white--text">
          <span class="headline">Menu</span>

          <v-spacer></v-spacer>

          <v-menu bottom left>
            <v-btn
              slot="activator"
              dark
              icon
            >
              <v-icon>more_vert</v-icon>
            </v-btn>

            <v-list>
              <v-list-tile
                v-for="(item, i) in items"
                :key="i"
                @click=""
              >
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>
        </v-card-title>

        <v-card-text>Lorem Ipsum</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>