Vuetify 导航抽屉存在剪裁和抽屉尺寸问题

Question

我在导航抽屉方面遇到了一些问题，希望有人能提供建议。

https://codepen.io/hobbeschild/pen/MWeXpey

1. 我以为“clipped”应该使抽屉出现在应用程序栏下方，但它出现在应用程序栏的顶部。

2. 如果包含卡的高度较短，则抽屉也被限制在这个高度（这可以给它一个滚动条）。抽屉的高度和宽度是否可以始终大于其内容？

HTML：

    <div id="app">
      <v-app id="inspire">
        <v-card class="mx-auto overflow-hidden" height="100" width="344">
          <v-app-bar color="deep-purple accent-4" dark>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>My files</v-toolbar-title>
          </v-app-bar>
          <v-navigation-drawer v-model="drawer" absolute bottom temporary clipped>
            <v-list nav dense>
              <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
                <v-list-item>
                  <v-list-item-title>Foo</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>Bar</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>Fizz</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>Buzz</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>
          <v-card-text>
            The navigation drawer will appear from the bottom on smaller size screens.
          </v-card-text>
        </v-card>
      </v-app>
    </div>

JS：

    new Vue({
      el: "#app",
      vuetify: new Vuetify(),
      data: () => ({
        drawer: false,
        group: null
      }),
    
      watch: {
        group() {
          this.drawer = false;
        }
      }
    });

Answer 1

1. 我认为您不想将导航元素包含在卡片中。尝试将卡片放在标记中的导航抽屉下方。
2. 将 Clipped-left 添加到

   v-app-bar

   组件。
3. 从

   absolute

   中删除

   v-navigation-drawer

   。