vue.js - 如何在 Vuetify 中使 Appbar 透明且无填充

Question

如何摆脱将工具栏与内容分开的填充？
我想达到与下图相同的结果
期待:

我得到了什么:

这是我的 App.vue 文件

     <v-app>
       <app-navigation></app-navigation>
    
        <v-main>
          <v-content class="ma-0 pa-0">
            <div class="d-flex flex-wrap justify-center" width="900">
              <img src="https://picsum.photos/300/300"/>
              <img src="https://picsum.photos/600/300"/>
              <img src="https://picsum.photos/700/300"/>
              <img src="https://picsum.photos/200/300"/>
              <img src="https://picsum.photos/400/300"/>
              <img src="https://picsum.photos/500/300"/>
            </div>
          </v-content>
   
        </v-main>
      </v-app>

这是我的 应用导航文件 - 基本上，工具栏组件:

<v-toolbar color="transparent" flat>

  <router-link to="/">
    <v-toolbar-title class="pr-10"> {{ appTitle }} </v-toolbar-title>
  </router-link>

  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/about"> About </v-btn>

  <v-spacer class="hidden-sm-and-down" ></v-spacer>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/sign-up"> SIGN UP</v-btn>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/log-in"> LOG IN </v-btn>

</v-toolbar>

Answer 1

添加 absolute和 width="100%"到 <v-toolbar/> .

<v-toolbar flat color="transparent" absolute width="100%">
...
</v-toolbar>

Demo :