Один из первых компонентов, с которым вы сталкиваетесь при первом начале работы с Vuetify, — это v-app. Компонент Vuetify v-app требуется для всех приложений, созданных с помощью Vuetify. Он включает многие функции, которые предоставляет Vuetify. С помощью v-app дочерние компоненты могут получить доступ к глобальным данным из Vuetify, таким как тема приложения цвета или вариант темы (светлая/темная). v-app также обеспечивает надлежащую кросс-браузерную совместимость, например, поддержку определенных событий кликов в таких браузерах, как Safari. Мы можем использовать реквизит app для других компонентов, таких как v-navigation-drawer, v-app-bar и v-footer и других, чтобы настроить наше приложение с правильным размером вокруг компонента v-main. Таким образом, мы можем сосредоточиться на создании нашего приложения без необходимости вручную управлять размером макета.

Разметка приложения Vuetify с помощью v-app и v-main

Благодаря автоматическому изменению размера макета мы можем размещать наши основные элементы макета в любом месте нашей разметки, пока мы устанавливаем свойство app равным true. Компонент v-main важен для правильной работы содержимого нашей страницы с элементами макета. v-main будет иметь динамический размер в зависимости от структуры элементов макета, к которым применяется реквизит app.

Вот пример типичной разметки приложения Vuetify:

<!-- App.vue -->
<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>
  <v-app-bar app>
    <!-- -->
  </v-app-bar>
  <!-- Sizes your content based upon application components -->
  <v-main>
    <!-- Provides the application the proper gutter -->
    <v-container fluid>
      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-main>
  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

Примечание. Применение реквизита app автоматически устанавливает для свойства CSS position элемента значение fixed. Если мы хотим позиционирование absolute, вы можете перезаписать эту функциональность с помощью реквизита absolute.

Компоненты приложения Vuetify

Вот список всех компонентов Vuetify, которые поддерживают автоматическое изменение размера макета с помощью свойства приложения:

  • v-app-bar: Компонент панели приложений всегда размещается вверху приложения с более низким приоритетом, чем v-system-bar.
  • v-bottom-navigation: Нижний компонент навигации всегда размещается внизу приложения с более высоким приоритетом, чем v-footer.
  • v-footer: компонент нижнего колонтитула всегда размещается внизу приложения с более низким приоритетом, чем v-bottom-navigation.
  • v-navigation-drawer: Компонент навигационного ящика может быть размещен слева или справа от приложения и может быть настроен так, чтобы располагаться рядом или ниже v-app-bar.
  • v-system-bar: компонент системной панели всегда размещается вверху приложения с более высоким приоритетом, чем v-app.

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Получите бесплатную копию здесь.

Служба приложений Vuetify

Мы можем настроить наш макет с помощью службы приложений Vuetify. Служба взаимодействует с компонентом v-main, чтобы он мог правильно изменить размер содержимого приложения. Он поставляется с рядом доступных свойств:

{
  bar: number
  bottom: number
  footer: number
  insetFooter: number
  left: number
  right: number
  top: number
}

Эти свойства доступны только для чтения, поэтому мы не можем их редактировать. Мы можем получить к ним доступ из свойства application объекта $vuetify. Служба использует их для определения размера макета нашего основного контента и автоматически обновляет их, когда мы добавляем или удаляем один из компонентов приложения с применением реквизита app. Например, свойство top меняется при добавлении или удалении из разметки v-app-bar:

С v-app-bar:

<template>
  <v-app>
    <v-app-bar
      color="primary"
      app
    ></v-app-bar>
    <v-main>
      $vuetify.application.top:
      {{ this.$vuetify.application.top }}
    </v-main>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Без v-app-bar:

<template>
  <v-app>
    <v-main>
      <div class="ma-4">
        $vuetify.application.top:
        {{ this.$vuetify.application.top }}
      </div>
    </v-main>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Заключение

Компонент Vuetify v-app является важным компонентом и требуется во всех приложениях, созданных с помощью фреймворка. Он предоставляет такие функции, как автоматическое изменение размера макета, функциональность тем и совместимость с разными браузерами.

Еженедельно получайте советы и руководства по Vuetify, Vue, JavaScript и другим ресурсам:http://eepurl.com/hRfyJL

Обновлено на: codingbeautydev.com