如何将工具栏放在appbar的中间和顶部(vue，vuetify)
如何将工具栏放在appbar的中间和顶部(vue，vuetify)
提问于 2019-11-14 20:44:07
需要将工具栏放在位于中间的appbbar顶部。
工具栏在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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-15 06:38:00
尝尝这个
<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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58866208
复制相关文章
相似问题
腾讯云开发者
