Система Grid
Vuetify имеет 12-точечную систему сеток. Построенная с использованием flex-box , сетка используется для компоновки содержимого приложения. Она содержит 5 типов точек прерывания, которые используются для ориентации определённых размеров экрана или ориентации. Реквизиты для компонентов сетки фактически являются классами, которые получены из их определённых свойств. Это позволяет вам легко указать эти вспомогательные классы в качестве свойства, при этом всё ещё предоставляя классы для использования в любом месте.
Применение
The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections and contains the v-flex. The structure of your layout will be as follows, v-container » v-layout » v-flex. Each part of the grid chain is a flex-box element. The final, v-flex, automatically sets its children to have flex: 1 1 auto.
For convenience reasons, these components automatically transform attributes into classes. Allowing you to write <v-layout pa-3 mb-2></v-layout> instead of <v-layout class="pa-3 mb-2"></v-layout>. The only exception are data attributes which are left as-is.
API
Совместите элементы с базовым уровнем.
Выровняйте предметы по центру.
Совместите содержимое с центром.
Совместите содержимое до конца.
Совместите содержимое с пространством.
Совместите содержимое с пространством между ними.
Совместите содержимое с началом.
Выровняйте элементы до конца.
Выровняйте элементы до начала.
Укажите, чтобы отобразить элемент как flex/inline-flex/block и т. Д. Синтаксис - d- {type}. Например, d-flex.
Убедитесь, что высота элемента col заполняется родительским и дочерним. Важно для Safari / Firefox, если дети являются элементом столбца.
Удаляет контрольные точки размера viewport
Устанавливает gutter между элементами списка сетки в диапазоне от 2 до 24 пикселей
Устанавливает id DOM компонента
Выравнять контент по центру.
Выравнять контент в конец
Выравнять контент space around.
Выравнять контент space between.
Выравнять контент start.
Укажите настраиваемый тег для использования в компоненте
Примеры
Layout playground
Test the layout props in a simple playground.
Смещение
Смещения полезны для компенсации элементов, которые пока не видны. Так же, как и с точками останова, вы можете установить смещение для любых доступных размеров. Это позволяет вам точно настроить макет приложения.
Порядок
Вы можете управлять порядком элементов сетки. Как и в случае смещений, вы можете устанавливать разный порядок для разных размеров. Дизайн специализированных макетов экрана, которые подходят для любого приложения.
Направление и выравнивание
Назначьте направление и выравнивание различными способами. Все доступные flex-box api доступны через интуитивные вспомогательные props.
Точки останова строки и столбца
Динамически изменяйте свой макет на основе разрешения. (измените размер экрана и посмотрите, как изменится row на небольших контрольных точках)
Grow and Shrink
Flex components can utilize the grow and shrink props to automatically fill available space in a row or shrink to only use the space needed for its contents.
Nested grid
Grid могут быть вложенными, подобно другим фреймворкам, для того, чтобы достичь очень настраиваемых макетов.
Unique layouts
Сила и гибкость сетки Vuetify позволяют создавать удивительные пользовательские интерфейсы.
v-spacer
Компонент v-spacer полезно, когда вы хотите заполнить свободное пространство или сделать пространство между двумя компонентами.
Html tags
Иногда вам нужно указать элемент макета в качестве определённого тега, например, элемент section или li.