Застрял, чтобы построить простой макет с Vuetify - PullRequest
Новая
       8

Застрял, чтобы построить простой макет с Vuetify

0 голосов
/ 30 апреля 2020

Я новичок ie для Vuetify, и теперь у меня возникают проблемы с пониманием принципов, лежащих в основе его грид-системы.

Я пытаюсь создать страницу из двух столбцов, которые заполняют высоту страницы. Первый должен иметь два контейнера: панель инструментов (не панель инструментов приложения) и контейнер содержимого (должен использовать всю доступную высоту столбца). Второй столбец (без навигации) заполняет всю высоту страницы.

Базовая версия макета выглядит следующим образом: 

<v-content>
  <v-container>
    <v-row>
      <v-col :cols="9">
        <v-toolbar></v-toolbar>
        <v-row></v-row>
      </v-col>

      <v-col :col="3"></v-col>
    </v-row>
  </v-container>
</v-content>

Скорректированная версия: 

<v-content>
  <v-container class="fill-height pa-0" fluid>
    <v-row class="fill-height" no-gutters>
      <v-col class="d-flex flex-column" :cols="9">
        <v-toolbar class="flex-grow-0" dense flat>
          <v-app-bar-nav-icon />

          <v-toolbar-title>Toolbar</v-toolbar-title>
        </v-toolbar>

        <v-row class="flex-grow-1 blue"></v-row>
      </v-col>

      <v-col class="pa-3 red" :col="3">
        <v-card>
          <v-card-text>Component</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</v-content>

Codepen: https://codepen.io/become-iron/pen/dyYzdbZ?editors=1000

Выглядит так, как я этого хочу. Но я не чувствую, что это было сделано в стиле Vuetify (что бы это ни было). Может ли кто-нибудь помочь мне реализовать макет лучше?

Также следует ли использовать v-container в качестве root элемента каждой страницы? Или как?

...