Обновите свой макет без создания новых классов. Helpers классы отступов полезны для изменения padding и margin элемента.
Используйте игровую площадку, чтобы почувствовать, что могут делать различные helper классы. О том, как они работают, см. в разделе Как это работает ниже.
Helper классы применяют к элементу margin или padding в диапазоне от 0 до 12. Каждый прирост размеров был разработан для приведения в соответствие с общими отступами в Material Design. Эти классы могут быть применены в следующем формате{property}{direction}-{size}.
property применяет тип интервала:
m- применяетmarginp- применяетpadding
Параметр direction обозначает сторону, к которой относится свойство:
t- применяет отступ дляmargin-topиpadding-topb- применяет отступ дляmargin-bottomиpadding-bottoml- применяет отступ дляmargin-leftиpadding-leftr- применяет отступ дляmargin-rightиpadding-rights- применяет отступ дляmargin-left/padding-left(в режиме LTR) иmargin-right/padding-right(в режиме RTL)e- применяет отступ дляmargin-right/padding-right(в режиме LTR) иmargin-left/padding-left(в режиме RTL)x- применяет свойство для оба*-leftи*-righty- применяет свойство для оба*-topи*-bottoma- применяется отступ для свойства во всех направлениях
size контролирует приращение свойства с интервалами в 4px:
0- устраняет всеmarginилиpadding, установив его в01- устанавливаетmarginилиpaddingна 4px2- устанавливаетmarginилиpaddingна 8px3- устанавливаетmarginилиpaddingна 12px4- устанавливаетmarginилиpaddingна 16px5- устанавливаетmarginилиpaddingна 20px6- устанавливаетmarginилиpaddingна 24px7- устанавливаетmarginилиpaddingна 28px8- устанавливаетmarginилиpaddingна 32px9- устанавливаетmarginилиpaddingна 36px10- устанавливаетmarginилиpaddingна 40px11- устанавливаетmarginилиpaddingна 44px12- устанавливаетmarginилиpaddingна 48pxn1- устанавливает отрицательныйmarginна 4pxn2- устанавливает отрицательныйmarginв 8pxn3- устанавливает отрицательныйmarginна 12pxn4- устанавливает отрицательныйmarginна 16pxn5- устанавливает отрицательныйmarginна 20pxn6- устанавливает отрицательныйmarginна 24pxn7- устанавливает отрицательныйmarginна 28pxn8- устанавливает отрицательныйmarginна 32pxn9- устанавливает отрицательныйmarginна 36pxn10- устанавливает отрицательныйmarginна 40pxn11- устанавливает отрицательныйmarginна 44pxn12- устанавливает отрицательныйmarginна 48pxauto- устанавливает отступ вauto
Ниже приведена коллекция простых и сложных примеров.
Используя вспомогательные классы, вы можете легко центрировать контент по горизонтали.
Также отступ может быть отрицательным с интервалом от 1 до 12.
Vuetify поставляется с сеткой из 12 точек, построенной с помощью Flexbox. Расстояние используется для создания конкретных макетов в содержимом приложения. Она состоит из 5 media breakpoints, используемых для конкретных размеров и ориентации экрана: xs, sm, md, lg и xl. Разрешения по умолчанию определяются ниже в таблице Viewport Breakpoints и могут быть изменены путем настройки breakpoint service config.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Helper классы применяют margin или padding в заданной точке останова. Эти классы могут быть применены в следующем формате: {property}{direction}-{breakpoint}-{size}. Это не относится к xs, поскольку это излишне, например ma-xs-2 эквивалентно ma-2.
Ниже приведена коллекция простых и сложных примеров.
Отступ с помощью точек останова 'md' и 'lg'