Пространство является фундаментальным элементом визуального дизайна и важно в каждом пользовательском интерфейсе. При создании веб-приложений мы обычно отделяем элементы друг от друга, изменяя их отступы и поля. Vuetify предоставляет вспомогательные классы интервалов для настройки отступов и полей элементов без необходимости создавать новые классы. В этом посте мы узнаем, как их использовать.

Все вспомогательные классы Vuetify имеют следующий формат: {property}{direction}-{size}.

свойство

property указывает тип интервала, применяемого к элементу. Возможны два значения:

  • m - применяет маржу.
  • p - применяет отступ.

направление

Направление указывает направление поля или заполнения для применения интервала. В Vuetify есть девять доступных направлений:

  • t — применяет интервал для свойств CSS margin-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.