如何在appbar的中间和顶部放置工具栏（vue，vuetify）

Question

需要把toolbar放在appbbar的顶部中间

now

how to do

工具栏位于 appbar 标签中。而且我需要工具栏位于应用栏的中心和上方，如图所示。怎么做？

<template>
  <v-app>
    <v-app-bar app color="primary" dark prominent>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>ГринКэп</v-toolbar-title>

      <v-spacer></v-spacer>

      <div>
        <v-toolbar>
          <v-toolbar-items>
            <v-btn v-for="link in links" :key="link.title" :to="link.url" text>
              <v-icon left>{{ link.icon }}</v-icon>
              {{ link.title }}
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
      </div>
    </v-app-bar>

Answer 1

试试这个

<template>
  <v-app>
    <v-app-bar app color="primary" dark prominent style="position: relative;">
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>ГринКэп</v-toolbar-title>

      <v-spacer></v-spacer>

      <div>
        <v-toolbar absolute style="top: 65%;left: 50%; transform: translateX(-50%)">
          <v-toolbar-items>
            <v-btn v-for="link in links" :key="link.title" :to="link.url" text>
              <v-icon left>{{ link.icon }}</v-icon>
              {{ link.title }}
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
      </div>
    </v-app-bar>
</template>

我已经在工具栏中添加了top 和left，如果需要，您可以在应用栏上删除position: relative。