如何创建带有导航抽屉和可调整大小内容的 Vuetify 容器？

Posted 2023-02-23

【中文标题】如何创建带有导航抽屉和可调整大小内容的 Vuetify 容器？

【英文标题】：How to create Vuetify container with nav drawer and re-sizable content next to it?

【发布时间】：2020-11-05 02:25:58

【问题描述】：

我在创建一个 Vuetify 容器时遇到了问题，该容器将容纳一个导航抽屉和一个可调整大小的容器（卡片、行或任何其他 Vuetify 元素），如果抽屉打开或打开时它会变大已关闭（例如，类似于 Gmail）。

页面顶部还有一个工具栏，它必须始终保持相同的大小，抽屉只能在它下方的容器中。

我尝试了以下方法：

<div id="app">
  <v-app id="inspire" style="background-color: #ccc;">
    <v-main>
      <v-container fluid class="align-start px-12 py-12">
        <v-row class="mx-0">
          <v-toolbar flat class="px-6">
            <div class="text-h5 mx-3 primary--text">Messages</div>
            <v-spacer />
            <v-btn
              small
              depressed
              text
              @click="drawer = !drawer"
            >
              toggle drawer
            </v-btn>
          </v-toolbar>
        </v-row>
      </v-container>
      <v-container fluid class="align-start px-0 d-flex flex-row">
        <v-navigation-drawer
          v-model="drawer"
          class="mr-2"
          dark
          hide-overlay
        >
          Navigation
        </v-navigation-drawer>
        <v-card flat>card</v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    drawer: true
  )
)

那有一张很小的卡片，当我打开/关闭抽屉时它仍然完好无损。所以我尝试将width="100%" 属性添加到卡中。这使得卡片占据了其余的地方，但当我打开/关闭抽屉时它仍然保持其大小。

有什么帮助吗？这是这段代码的pen。

【参考方案1】：

一种方法是根据drawer 的值设置:width 属性...

<div id="app">
  <v-app id="inspire" style="background-color: #ccc;">
    <v-main>
    <v-container fluid class="align-start px-12 py-12">
      <v-row class="mx-0">
        <v-toolbar flat class="px-6">
          <div class="text-h5 mx-3 primary--text">Messages</div>
          <v-spacer />
          <v-btn
            small
            depressed
            text
            @click="drawer = !drawer"
          >
            toggle drawer
          </v-btn>
        </v-toolbar>
      </v-row>
    </v-container>
    <v-container fluid class="align-start px-0 d-flex flex-row">
      <v-navigation-drawer
        v-model="drawer"
        class="mr-2"
        dark
        hide-overlay
        :
      >
        Navigation
      </v-navigation-drawer>
      <v-card flat class="grow">card</v-card>
    </v-container>
  </v-main>
  </v-app>
</div>

Demo