VuetifyJs - отличный фреймворк Material Design для VueJs. Он поставляется с множеством готовых к использованию компонентов. Скрытый чемпион - это встроенная адаптивная система. Это не компонент, а декларативная функция некоторых его компонентов. В этой статье я покажу вам, как создавать отзывчивый текст, формы, изображения и многое другое - последнее с помощью объекта точки останова. Итак, если вы хотите создать веб-приложение, которое подходит для любого размера окна просмотра, VuetifyJs и, конечно же, эта статья для вас;)
Я предполагаю, что у вас есть работающий проект VueJs с VuetifyJs, поэтому я пропускаю этот материал по созданию проекта. Если вы хотите попробовать это руководство в новой настройке, прочтите Учебник по быстрому запуску Vuetify. Еще один момент: я использую машинописный текст (и могу порекомендовать это). Если вы используете Javascript, в вашем компоненте все может немного отличаться, но в этой статье у нас почти нет кода, так что это не должно быть проблемой.
Контрольные точки
Точки останова в адаптивных веб-приложениях представляют разные размеры представления. Очевидно, у него есть смартфон другого размера, чем планшет, или ноутбук, или обычный монитор ПК, или сверхширокий экран. Мы, как веб-разработчики, должны создавать приложения, которые работают на любом размере экрана - по крайней мере. Я думаю, он должен работать и отлично смотреться на любом экране. Для этого спецификация дизайна материалов предоставила нам точки останова. По одному для каждого типа устройства.
На снимке экрана выше показаны точки останова области просмотра Material Design. Эта система точек останова активно используется VuetifyJs. Вы можете ознакомиться с документацией для получения дополнительной информации.
Отзывчивый текст
Некоторые функции адаптивного текста поставляются с Vuetify 2.3.0. Так что тот или иной ранний участник должен использовать бета-версию.
Так что же такое адаптивный текст? Размер текста зависит от размера экрана. Если у вас есть заголовок на сверхшироком дисплее, размер шрифта 80 пикселей может выглядеть лучше, чем 20 пикселей. С другой стороны, заголовок размером 80 пикселей может разбить весь дизайн на крошечном мобильном телефоне. Так что отзывчивый текст определенно имеет смысл. Конечно, вы можете сделать это с помощью CSS и медиа-запросов. Но в VuetifyJs это готовая декларативная функция.
На изображении выше показано, как заголовок и даже текст могут изменяться в зависимости от размера представления. В Vuetify вы можете получить такое поведение, просто объявив разные классы в текстовом элементе:
<template>
<v-row class="pa-3">
<h1
class="
text-h4 [1]
text-md-h2 [2]
text-lg-h1 [2]
text-xl-h1 [2]
text-truncate" [3]
>This is my heading</h1>
<p
class="
text--secondary
text-caption
text-sm-body-2
text-md-body-1
text-lg-body-1
text-xl-body-1
text-justify">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...
</p>
</v-row>
</template>
/// @/components/ResponsiveText.vue
У вас всегда есть класс размера текста по умолчанию [1], который также охватывает самую маленькую точку останова (xs). Значение по умолчанию можно перезаписать, используя классы точек останова для каждой точки останова [2] - если вы хотите другой размер текста в соответствии с значением по умолчанию. Шаблон всегда text-[breakpoint]-[fontsize]. Отличным инструментом для заголовков является text-truncate, который обрезает текст, если он не помещается во внешний элемент.
Адаптивные формы
Еще одна большая проблема при создании адаптивных веб-приложений - это формы. Их следует располагать в зависимости от размера просмотра. Здесь великая сеточная система может проявить свою силу. Конечно, сетка полезна не только при использовании форм, но и в адаптивных веб-приложениях. Поэтому я использовал образец формы - он работает всегда одинаково, независимо от того, что вы хотите поместить на экран.
Сетка состоит из строк и столбцов. Каждая «виртуальная» строка имеет 12 «виртуальных» столбцов, что дает сетку из произвольного количества строк по 12 столбцов в каждой. В vuetify есть два элемента - v-row и v-column. Важно понимать, что вы можете поместить v-row и v-column в сетку, но они не обязательно должны быть равны статической сетке от n до 12.
Все поля на изображении выше названы с помощью R (ow) [число] C (столбец) [число]. Таким образом, вы можете видеть, как поля перемещаются в системе сетки при изменении размера представления. Мы можем взглянуть на первую строку формы (R1C1, R1C2, R1C3), чтобы прояснить ситуацию. На больших экранах первая строка (которая равна элементу v-row) содержит три поля в трех элементах v-col. Первый v-col занимает 6 виртуальных столбцов, остальные два - по 3 столбца. Таким образом, они распределены по 12 виртуальным столбцам.
Давайте посмотрим на левый нижний снимок экрана. Такая же форма, меньший размер изображения. Первый элемент v-col распространяется на 12 виртуальных столбцов, два других - на 6 каждый. Таким образом, элементу v-row требуется две строки по 12 виртуальных столбцов. Правый нижний снимок экрана показывает ту же форму в очень маленьком виде. Здесь v-row требуются три виртуальных строки, и каждая v-col занимает 12 столбцов.
Вопрос в том, как я могу получить такое поведение от VuetifyJs? К счастью, это самая простая часть. Просто как записать количество виртуальных столбцов в атрибут точки останова:
...
<v-row>
<v-col cols="12" md="6" lg="6" xl="6">
<v-text-field
label="Field R1C1"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3" lg="3" xl="3">
<v-text-field
label="Field R1C2"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3" lg="3" xl="3">
<v-text-field
label="Field R1C3"
></v-text-field>
</v-col>
</v-row>
...
/// @/components/ResponsiveForm.vue
Атрибут точки останова есть для каждой точки останова в Material Design, кроме xs. Это покрывается атрибутом по умолчанию cols. С сеточной системой VuetifyJs вы можете создавать очень мощные адаптивные макеты без какой-либо строчки кода JavaScript.
Размер адаптивного изображения
Отзывчивость изображений проистекает из способности загружать изображения наилучшего размера и качества для устройства. Для этого элемент img предлагает атрибуты scrset и sizes. В сети есть масса отличных статей, поэтому я не собираюсь писать другую. Сообщение для пользователей VuetifyJs: Эти два атрибута также присутствуют в компоненте v-img. Таким образом, вы можете использовать стандартный адаптивный материал с замечательными функциями, такими как ленивая предварительная загрузка изображений или атрибут contain.
... <v-img src="http://catify.de/.../village_1264.jpg" lazy-src="http://catify.de/.../village_blur.jpg" srcset="http://catify.de/.../village_600.jpg 600w, http://catify.de/.../village_960.jpg 960w, http://catify.de/.../village_1264.jpg 1264w, http://catify.de/.../village_1904.jpg 1904w, http://catify.de/.../village_2400.jpg 2400w" width="100%" ></v-img> ... /// @/components/ResponsiveImage.vue
Отзывчивый тип- или JavaScript
Для каждого желания отзывчивости, которое VuetifyJs не выполняет декларативным образом, они предоставляют вам отзывчивый объект точки останова. Это можно использовать в вычисляемых свойствах, методах или почти где угодно в контексте VueJs:
this.$vuetify.breakpoint
Он поддерживает вас информацией о текущей точке останова, условных выражениях, измерениях и т. Д. Вы можете проверить документацию, чтобы узнать больше. В примере я использовал этот объект, чтобы переключиться с многих значков на панели приложения на значок бургера, чтобы открыть скрытое меню. Это просто делается в одной строке кода [1]:
<script lang="ts">
import Vue from 'vue'
import { Component } from "vue-property-decorator"
@Component
export default class ResponsiveActionIcons extends Vue {
get shrink() {
return this.$vuetify.breakpoint.smAndDown [1]
}
show() {
console.log("show menu...")
}
}
</script>
/// @/components/ResponsiveActionIcons.vue
Конец
Вы можете найти исходники моего адаптивного образца VuetifyJs в репозитории github. Надеюсь, вам понравилась эта статья. Пожалуйста, оставьте комментарий, если у вас есть какие-либо вопросы или вы хотите оставить отзыв.
