vue.js - Vuetify App Bar 太高 - 占据了屏幕的一半

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>

Demo in Codepen

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

文档中有很多代码示例都带有这个 App Bar 标记，所以我想找出问题所在。

Answer 1

您需要将 app 属性添加到 v-app-bar 中，如下所示:

<v-app>

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

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

</v-app>

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

来自 Vuetify > Components > Application > Default Markup :

You can place your layout elements anywhere, as long as you apply the app property.

来自 Vuetify > Components > App Bar > API :

app
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content component to function properly.