Vuetify：如何將 v-navigation-drawer 放在 v-app-bar 下方

Question

https://vuetifyjs.com/en/components/application/#application-components的文檔提到可以將 v-navigation-drawer 配置為顯示在 v-app-bar 下方（而不是旁邊），但它們不會似乎解釋了如何實際做到這一點。

這是我正在尋找的布局（v-app-bar 跨越 window 的整個寬度，v-navigation-drawer 位於 v-app-bar 下方）：

如何將 v-navigation-bar 配置為這樣呈現？

我當前的代碼如下所示：

<v-app>
    <v-system-bar app height="30" color="primary">The system bar</v-system-bar>

    <v-app-bar app color="secondary" dense dark>
      The application bar
    </v-app-bar>

    <v-navigation-drawer app>
      <p>Navigation drawer</p>
    </v-navigation-drawer>

    <v-main>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>The footer</v-footer>
    <v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>

它像這樣呈現（注意導航抽屜在旁邊，而不是在應用程序欄下方）

Answer 1

您需要將clipped-left道具添加到您的v-app-bar並將clipped道具添加到您的v-navigation-drawer 。