vue.js - Vuetify 应用栏太高 - 占据屏幕的一半

Question

当我有一个容器v-app-bar内部的其他空应用程序时v-app，应用程序栏占据了页面的一半。

<v-app>

  <v-app-bar color="deep-purple" dark >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

Codepen 中的演示

我尝试为dense, short, &添加选项，height但它们似乎没有任何影响。

文档中有大量带有此确切 App Bar 标记的代码示例，因此我试图找出问题所在。

标签： vue.jsvuetify.js

Answer 1

您需要像这样添加app属性v-app-bar：

<v-app>

  <v-app-bar color="deep-purple" dark app >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

这里的关键是 App 组件中的所有子元素必须表明它们是否应该使用应用布局

从Vuetify > Components > Application > Default Markup：

只要您应用该app属性，您就可以将布局元素放置在任何地方。

从Vuetify > Components > App Bar > API：

app
将组件指定为应用程序布局的一部分。用于动态调整内容大小。使用此道具的组件应驻留在组件之外v-content才能正常运行。