Vuetify открыть навигационный ящик как мобильное приложение - PullRequest
Новая
       5

Vuetify открыть навигационный ящик как мобильное приложение

0 голосов
/ 16 января 2019

Если вы измените размер окна на мобильный, вы можете увидеть боковой значок, чтобы переключить мой ящик, нажав на него.Ящик vuetify по умолчанию очень хорош, но я хотел бы открыть его, как в мобильном приложении.

Как мне открыть ящик и следовать за мышью или пальцем?Если вы не понимаете, что я имею в виду, демонстрация полимера делает это.https://shop.polymer -project.org / вы можете поменять местами слева направо и можете управлять выдвижным ящиком в mousedown.

Вот мой код и кодовая ручка: 

<div id="app">
  <v-app>

    <v-toolbar app class="menu-shadow" color="white" height="64">
      <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title class="text-uppercase ">
        <span class="font-weight-light">My </span>
        <span class="primary--text">App</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <v-toolbar-items v-for="link in links" :key="link.text" class="hidden-sm-and-down">
        <v-btn flat :to="link.route">{{ link.text }}</v-btn>
      </v-toolbar-items>

      <v-btn flat color="grey">
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

      <v-navigation-drawer app v-model="drawer" app disable-resize-watcher class="primary">
      <v-layout column align-center>
        <v-flex class="mt-5">
          <v-avatar size="100">
            <img src="/avatar-1.png" alt="">
          </v-avatar>

        </v-flex>
      </v-layout>

      <v-list>
        <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
          <v-list-tile-action>
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title class="white--text">{{ link.text }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>


    <v-content>
      <v-container grid-list-xl>

      </v-container>
    </v-content>
  </v-app>
</div>

https://codepen.io/anon/pen/qLvRgj

...