Система 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

v-container
Имя
align-baseline
По умолчанию
false
Тип
Boolean

Совместите элементы с базовым уровнем.

Имя
align-center
По умолчанию
false
Тип
Boolean

Выровняйте предметы по центру.

Имя
align-content-center
По умолчанию
false
Тип
Boolean

Совместите содержимое с центром.

Имя
align-content-end
По умолчанию
false
Тип
Boolean

Совместите содержимое до конца.

Имя
align-content-space-around
По умолчанию
false
Тип
Boolean

Совместите содержимое с пространством.

Имя
align-content-space-between
По умолчанию
false
Тип
Boolean

Совместите содержимое с пространством между ними.

Имя
align-content-start
По умолчанию
false
Тип
Boolean

Совместите содержимое с началом.

Имя
align-end
По умолчанию
false
Тип
Boolean

Выровняйте элементы до конца.

Имя
align-start
По умолчанию
false
Тип
Boolean

Выровняйте элементы до начала.

Имя
d-{type}
По умолчанию
false
Тип
Boolean

Укажите, чтобы отобразить элемент как flex/inline-flex/block и т. Д. Синтаксис - d- {type}. Например, d-flex.

Имя
fill-height
По умолчанию
false
Тип
Boolean

Убедитесь, что высота элемента col заполняется родительским и дочерним. Важно для Safari / Firefox, если дети являются элементом столбца.

Имя
fluid
По умолчанию
false
Тип
Boolean

Удаляет контрольные точки размера viewport

Имя
grid-list-{xs through xl}
По умолчанию
false
Тип
Boolean

Устанавливает gutter между элементами списка сетки в диапазоне от 2 до 24 пикселей

Имя
id
По умолчанию
undefined
Тип
string

Устанавливает id DOM компонента

Имя
justify-center
По умолчанию
false
Тип
Boolean

Выравнять контент по центру.

Имя
justify-end
По умолчанию
false
Тип
Boolean

Выравнять контент в конец

Имя
justify-space-around
По умолчанию
false
Тип
Boolean

Выравнять контент space around.

Имя
justify-space-between
По умолчанию
false
Тип
Boolean

Выравнять контент space between.

Имя
justify-start
По умолчанию
false
Тип
Boolean

Выравнять контент start.

Имя
tag
По умолчанию
div
Тип
String

Укажите настраиваемый тег для использования в компоненте

Примеры

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.

Edit this page | language on Github