Как я могу сделать адаптивный дизайн навигационной панели для моего приложения vuetify? - PullRequest
Новая
       14

Как я могу сделать адаптивный дизайн навигационной панели для моего приложения vuetify?

0 голосов
/ 02 ноября 2019

Vuetify V2.1.9 Cant Разработайте адаптивный дизайн панели навигации с помощью vuetify. в то время как я пытаюсь кодировать, используя следующее, я не могу разработать адаптивный дизайн навигационной панели. это не работает. Если вы можете исправить код, это будет полезно. Заранее спасибо . Удачного кодирования. Мое требование похоже на нормальную работающую навигационную панель. Когда я открываю страницу в мобильном телефоне, она должна скрывать и показывать меню гамбургера. 

<v-navigation-drawer v-model="sideNav" absolute temporary>
  <v-list-item-content class="hidden-sm-and-up">
    <v-list dense>
      <v-list-item v-for="item in guestNav" :key="item.name" link>
        <v-list-item-icon>
          <v-icon>mdi-user</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-list-item-content>
</v-navigation-drawer>
<v-toolbar color="#00A972" dark height="50px">
  <v-spacer></v-spacer>
  <v-toolbar-title>
    <h5 style="font-weight: 500;">Projects</h5>
  </v-toolbar-title>
  <v-app-bar-nav-icon @click.native="sideNav = !sideNav" class="hidden-sm-and-up"></v-app-bar-nav-icon>

  <div class="flex-grow-1"></div>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-sm-and-up">
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >HOME</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>

  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >STORE</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>

  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >WALLET</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>
  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >LOG IN</v-btn>
      <v-btn
        text
        :ripple="false"
        class="green"
        dark
        style="margin-top:7px;margin-right:20px;font-weight:400;background-color: #38B98A!important;"
      >SIGN UP</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
</v-toolbar>

1 Ответ

0 голосов
/ 05 ноября 2019

Используйте медиазапрос, чтобы навигационная панель реагировала следующим образом:

@ только экран мультимедиа и (max-width: 768px) {.nav_item {display: none! Важный;}}

нджан ору самбавам аахтта: -)

...