Один из первых компонентов, с которым вы сталкиваетесь при первом начале работы с 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