Обратите внимание, как теперь страница выглядит иначе, чем начальная страница по умолчанию, которая обычно создается с помощью команды create app Vue CLI create app . Это означает, что Vuetify был настроен правильно. Давайте разберем код Vuetify, начиная с этого компонента:
<v-app> <!-- put content here.... --> </v-app>
Компонент v-app является обязательной оболочкой, необходимой для правильной работы приложения. Он используется для определения точек останова сетки для макета. Он может существовать где угодно внутри <body> , но должен быть родителем всех компонентов Vuetify. Компонент v-content должен быть прямым потомком v-app .
Следующий компонент, который мы обсудим, это v-toolbar . Это может быть использовано в качестве основной панели инструментов для вашего приложения. Вы можете разместить иконки, меню и другие предметы внутри него.
<v-app> <v-toolbar app> <!-- put content here.... --> </v-toolbar> </v-app> Первая опора, с которой вы столкнетесь, это app . Это просто говорит панели инструментов придерживаться вершины, когда пользователь начинает прокручивать вниз. Если вы удалите реквизит app , панель инструментов будет прокручиваться вместе с остальной частью страницы. Попробуйте сами и посмотрите, что получится. Мы также можем добавить больше реквизита, чтобы настроить внешний вид нашей панели инструментов.
С Vuetify вы поймете, что вам вряд ли понадобится писать какой-либо код CSS для настройки внешнего вида вашего приложения. Однако если вы хотите, чтобы ваше приложение поддерживало несколько тем, вам может потребоваться определить несколько таблиц стилей. Vuetify предоставляет генератор тем, чтобы помочь вам выбрать набор цветов для вашей темы.
А сейчас давайте сосредоточимся на настройке нашего приложения с помощью реквизита. Первый, который мы собираемся изучить, называется dark . Просто обновите ваш код следующим образом:
<v-app> <v-toolbar app dark> <!-- put content here.... --> </v-toolbar> </v-app>или
<v-app> <v-toolbar app dark color="red"> <!-- put content here.... --> </v-toolbar> </v-app> Чтобы затемнить фон, вы можете использовать значения от darken-1 до darken-4 . Каждый уровень увеличивает темноту. Вы можете использовать значения от lighten-1 до lighten-4 чтобы осветлить фон. Если вы хотите изменить цвет текста, добавьте text-- перед text-- — например, text--lighten-3 . У нас также есть accent-1 до accent-4 который, кажется, контролирует насыщенность. accent-1 снижает насыщенность цвета, в то время как accent-4 увеличивает насыщенность и становится более яркой.
Обратите внимание, что я не вытаскиваю эти реквизиты и ценности из воздуха. Вот документация для цветов Vuetify.
Практика