Как использовать сеточную систему Vuetify для создания боковой панели и панели навигации? - PullRequest
Новая
       90

Как использовать сеточную систему Vuetify для создания боковой панели и панели навигации?

0 голосов
/ 06 мая 2020

Я пытаюсь создать фон с помощью Vuetify, который имеет как боковую панель, так и панель навигации. Это должно выглядеть так:

enter image description here

На данный момент я создал боковую панель с v-navigation-drawer, однако я не могу получить навигатор на go в нужном месте. Как я могу добавить панель навигации в следующий код, чтобы он выглядел как изображение выше? 

<template>
<div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
            color="#09151E"
            permanent
            expand-on-hover
        >
            <v-divider></v-divider>
            <v-list nav dense>
                <v-list-item link href="#">
                    <v-list-item-icon>
                        <v-icon color="white" small>mdi-lightbulb</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title class="title">Blue</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-card>Navbar</v-card>
    </v-app>
</div>

Я знаю, что писать v-card ниже не так, как это должно быть написано, но при использовании v-row и v-col по углам страницы появляются пробелы, и это выглядит не очень хорошо

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Вам нужно создать 'v-app-bar' с app prop перед 'v-navigation-drawer'. Удалите опору permanent и добавьте опору app в панель навигации .. 

   <v-app id="inspire">
      <v-app-bar
          app
          color="yellow"
        >
          <v-toolbar-title>Navbar</v-toolbar-title>
          <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer
            app
            color="#09151E"
            expand-on-hover>
            <v-divider></v-divider>
            <v-list nav dense>
                ...
            </v-list>
      </v-navigation-drawer>
      <v-content>
          ...
      </v-content>
   </v-app>

Демо

1 голос
/ 06 мая 2020

Все, что вам нужно сделать, это:

  • Создать v-app-bar или v-toolbar компонент

  • Добавить app prop к вашему v-navigation-drawer

Демо: https://codepen.io/aQW5z9fe/pen/GRpQqpG?editors=1010

<v-app-bar app>
  Title
</v-app-bar>

<v-navigation-drawer
  color="#09151E"
  permanent
  expand-on-hover
  app
>
...

Вы можете добавить clipped-left prop к app-bar, если вы хотите, чтобы он отображался за navigation-drawer, а не рядом с ним.

...