Пространство является фундаментальным элементом визуального дизайна и важно в каждом пользовательском интерфейсе. При создании веб-приложений мы обычно отделяем элементы друг от друга, изменяя их отступы и поля. Vuetify предоставляет вспомогательные классы интервалов для настройки отступов и полей элементов без необходимости создавать новые классы. В этом посте мы узнаем, как их использовать.
Все вспомогательные классы Vuetify имеют следующий формат: {property}{direction}-{size}
.
свойство
property
указывает тип интервала, применяемого к элементу. Возможны два значения:
m
- применяет маржу.p
- применяет отступ.
направление
Направление указывает направление поля или заполнения для применения интервала. В Vuetify есть девять доступных направлений:
t
— применяет интервал для свойств CSSmargin-top
илиpadding-top
элемента.b
— применяет интервал дляmargin-bottom
илиpadding-bottom
.l
— применяет интервал дляmargin-left
илиpadding-left
.r
— применяет интервал дляmargin-right
илиpadding-right
.s
— когда Vuetify находится в режиме LTR по умолчанию,s
действует аналогичноl
. Но в режиме RTL ведет себя какr
.e
— когда Vuetify находится в режиме LTR по умолчанию,e
действует аналогичноr
. Но в режиме RTL ведет себя какl
.x
— применяет интервал как для*-left
, так и для*-right
.y
— применяет интервал как для*-top
, так и для*-bottom
.a
— применяет интервал для свойства во всех четырех направлениях.
размер
Размер устанавливает фактическое значение интервала в пикселях. size
0
удалит поля или отступы из элемента в указанном направлении. Чтобы получить количество пикселей для положительных значений, просто умножьте число size
на 4 пикселя. Vuetify предоставляет 16 возможных положительных значений интервала:
1
— устанавливает поле или отступ в 4 пикселя.2
— устанавливает отступ или отступ равным 8px.3
— устанавливает отступ или отступ равным 12px.4
— устанавливает отступ или отступ равным 16px.5
— устанавливает отступ или отступ равным 20px.6
— устанавливает поле или отступ в 24 пикселя.7
— устанавливает поле или отступ в 28px.8
— устанавливает поле или отступ в 32 пикселя.9
— устанавливает поле или отступ в 36px.10
— устанавливает поле или отступ в 40px.11
— устанавливает поле или отступ в 44 пикселя.12
— устанавливает поле или отступ в 48px.13
— устанавливает поле или отступ в 52px.14
— устанавливает поле или отступ в 56px.15
— устанавливает поле или отступ в 60px.16
— устанавливает поле или отступ в 64 пикселя.
Мы можем указать отрицательные значения интервала, поставив перед числом префикс n
. Чтобы получить количество пикселей для отрицательных значений, умножьте size
на -4px. Отрицательные значения интервала применяются только к полям, а в Vuetify их также 16:
n1
— устанавливает поле на -4px.n2
— устанавливает поле на -8px.n3
- установите поле на -12px.n4
— устанавливает поле на -16px.n5
— устанавливает поле на -20px.n6
— устанавливает поле на -24px.n7
— устанавливает поле на -28px.n8
— устанавливает поле на -32px.n9
— устанавливает поле на -36px.n10
— устанавливает поле на -40px.n11
— устанавливает поле на -44px.n12
— устанавливает поле на -48px.n13
— устанавливает поле на -52px.n14
— устанавливает поле на -56px.n15
— устанавливает поле на -60px.n16
— устанавливает поле на -64px.
Помимо указанных выше доступных значений интервала, у нас также есть интервал auto
, который устанавливает поля или отступы элементов в значение auto
.
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачайте бесплатную копию здесь!
Примеры
Теперь, когда мы знаем вспомогательные классы Vuetify spacing, давайте посмотрим, как их использовать на практике.
<template> <v-app> <v-row> <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col> <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col> </v-row> </v-app> </template>
<script> export default { name: 'App', }; </script>
Здесь мы создали две карточки и настроили их цвета:
Добавим класс mt-2
к элементу v-row
, содержащему карточки:
<template> <v-app> <v-row class="mt-2"> <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col> <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col> </v-row> </v-app> </template>
<script> export default { name: 'App', }; </script>
Если вы поняли все, что мы рассмотрели ранее, вы знаете, что класс mt-2
установит верхнее поле v-row
равным 8px. Когда вы запустите этот код, вы увидите, что между двумя карточками и верхней частью страницы теперь есть расстояние:
С классом mx-3
мы также создадим левое и правое поля (по 12 пикселей):
<template> <v-app> <v-row class="mt-2 mx-3"> <v-col sm="6"> <v-card color="blue" dark>JavaScript</v-card> </v-col> <v-col sm="6"> <v-card color="green" dark>PHP</v-card></v-col> </v-row> </v-app> </template>
<script> export default { name: 'App', }; </script>
Затем мы воспользуемся классами pa-4
и pa-6
, чтобы добавить отступы разного размера к двум карточкам:
<template> <v-app> <v-row class="mt-2 mx-3"> <v-col sm="6"> <v-card color="blue" dark class="pa-4">JavaScript</v-card> </v-col> <v-col sm="6"> <v-card color="green" dark class="pa-6">PHP</v-card></v-col > </v-row> </v-app> </template>
<script> export default { name: 'App', }; </script>
Вот еще один пример. У нас есть две кнопки, чьи цвета мы установили на зеленый и красный:
<template> <v-app> <v-col> <v-btn color="green" dark>Okay</v-btn> <v-btn color="red" dark>Cancel</v-btn></v-col > </v-app> </template>
<script> export default { name: 'App', }; </script>
Класс py-10
добавит нижнюю и верхнюю отступы по 40 пикселей к зеленой кнопке:
<template> <v-app> <v-col> <v-btn color="green" class="py-10" dark>Okay</v-btn> <v-btn color="red" dark>Cancel</v-btn></v-col > </v-app> </template>
<script> export default { name: 'App', }; </script>
Чтобы разнести кнопки, мы добавим левое поле к кнопке «Отмена» с классом ml-5
:
<template> <v-app> <v-col> <v-btn color="green" class="py-10" dark>Okay</v-btn> <v-btn color="red" dark class="ml-5">Cancel</v-btn></v-col > </v-app> </template>
<script> export default { name: 'App', }; </script>
Мы также дополним его по горизонтали классом px-16
:
<template> <v-app> <v-col> <v-btn color="green" class="py-10" dark>Okay</v-btn> <v-btn color="red" dark class="ml-5 px-16">Cancel</v-btn></v-col > </v-app> </template>
<script> export default { name: 'App', }; </script>
Давайте добавим отрицательное правое поле к кнопке «ОК», чтобы удалить добавленный нами интервал:
<template> <v-app> <v-col> <v-btn color="green" class="py-10 mr-n5" dark>Okay</v-btn> <v-btn color="red" dark class="ml-5 px-16">Cancel</v-btn></v-col > </v-app> </template>
<script> export default { name: 'App', }; </script>
Краткое содержание
Vuetify предоставляет вспомогательные классы интервалов, которые позволяют нам размещать и дополнять наши элементы пользовательского интерфейса без использования пользовательских классов или встроенного CSS. Эти классы могут изменять поля или отступы элементов в разных направлениях и до различных размеров.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе последних советов и руководств по Vuetify и Vue.
Получить обновленную статью на codingbeautydev.com.