Vuetify - пробел в навигационном ящике - PullRequest
Новая
       38

Vuetify - пробел в навигационном ящике

1 голос
/ 07 марта 2020

Когда навигационная панель закрыта или открыта, она создает большой пробел на странице в зависимости от его высоты. Как этого избежать?

closed drawer open drawer

На втором изображении хорошо видно между панелью навигации и компонентом Создать запись что ящик занимает комнату 

<template>
  <v-app>
    <v-navigation-drawer clipped v-model="sideNav">
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      dark
      fixed
      class="default-layout__navbar"
      extended
      extension-height="3"
    >
      <v-app-bar-nav-icon
        @click.native.stop="sideNav = !sideNav"
        class="hidden-sm-and-up"
      >
      </v-app-bar-nav-icon>
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">
          Blog
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>

      <v-spacer></v-spacer>
      <!-- <span class="nav-user" v-if="loggedInUser.token">{{
        loggedInUser.username
      }}</span> -->
    </v-app-bar>

    <v-content class="default-layout__main-content">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </v-content>
  </v-app>
</template>

1 Ответ

1 голос
/ 07 марта 2020

Если я понимаю вопрос, вы ищете такой макет. Обратите внимание, как app реквизит используется в v-navigation-drawer и app-bar ... 

   <v-app>
        <v-navigation-drawer v-model="sideNav" app>
            <v-list>
                <v-list-item v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-list-item-icon>
                        <v-icon v-text="item.icon"></v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title v-text="item.title"></v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar dark fixed app class="default-layout__navbar" extended extension-height="3">
            <v-app-bar-nav-icon @click.native.stop="sideNav = !sideNav" class="hidden-sm-and-up">
            </v-app-bar-nav-icon>
            <v-toolbar-title>
                <router-link to="/" tag="span" style="cursor: pointer"> Blog </router-link>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items class="hidden-xs-only">
                <v-btn v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-icon left dark>{{ item.icon }}</v-icon>
                    {{ item.title }}
                </v-btn>
            </v-toolbar-items>
            <v-spacer></v-spacer>
            <span class="nav-user"> username </span>
        </v-app-bar>
        <v-content class="default-layout__main-content">
            <transition name="fade" mode="out-in">
                <router-view />
            </transition>
        </v-content>
  </v-app>

Демо: https://codeply.com/p/KNNSlNEmzM

...