Space

Компонент ElSpace в библиотеке Element Plus используется для управления расстоянием между элементами интерфейса. Он позволяет создавать аккуратные, равномерно распределённые отступы без необходимости вручную прописывать стили margin или padding для каждого элемента.

<template>
  <el-space>
    <el-button>Кнопка 1</el-button>
    <el-button>Кнопка 2</el-button>
    <el-button>Кнопка 3</el-button>
  </el-space>
</template>

По умолчанию ElSpace располагает элементы горизонтально и с небольшим отступом между ними.

Основные пропсы

  • direction – задаёт направление размещения элементов:

    • horizontal (по умолчанию) – элементы располагаются в строку.
    • vertical – элементы располагаются в колонку.
<el-space direction="vertical">
  <el-button>Кнопка 1</el-button>
  <el-button>Кнопка 2</el-button>
</el-space>

  • size – размер отступа между элементами. Может быть числом (пиксели) или строкой:

    • small, medium, large
<el-space size="large">
  <el-button>Кнопка 1</el-button>
  <el-button>Кнопка 2</el-button>
</el-space>
  • wrap – включение переноса элементов на новую строку при недостатке места (по умолчанию false):
<el-space wrap>
  <el-button v-for="i in 10" :key="i">Кнопка {{ i }}</el-button>
</el-space>
  • fill – позволяет элементам занимать доступное пространство равномерно:
<el-space fill>
  <el-button>Кнопка 1</el-button>
  <el-button>Кнопка 2</el-button>
</el-space>

  • align – выравнивание элементов по вертикали:

    • start, center, end, baseline
<el-space align="center">
  <el-button>Короткая</el-button>
  <el-button>Очень длинная кнопка</el-button>
</el-space>

Использование с динамическими списками

ElSpace прекрасно работает с v-for и динамическим содержимым, автоматически применяя отступы ко всем дочерним элементам:

<el-space size="medium">
  <el-button v-for="item in items" :key="item.id">{{ item.label }}</el-button>
</el-space>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Кнопка A' },
        { id: 2, label: 'Кнопка B' },
        { id: 3, label: 'Кнопка C' }
      ]
    };
  }
};
</script>

Комбинирование с другими компонентами

ElSpace может использоваться для управления расстоянием между любыми элементами: кнопками, иконками, формами, карточками, таблицами.

<el-space direction="vertical" size="large">
  <el-input placeholder="Введите текст"></el-input>
  <el-button type="primary">Отправить</el-button>
  <el-card>
    Содержимое карточки
  </el-card>
</el-space>

Горизонтальные и вертикальные комбинации

Можно использовать вложенные ElSpace для сложного расположения элементов:

<el-space direction="vertical" size="medium">
  <el-space size="small">
    <el-button>1</el-button>
    <el-button>2</el-button>
  </el-space>
  <el-space size="small">
    <el-button>3</el-button>
    <el-button>4</el-button>
  </el-space>
</el-space>

Такой подход позволяет создавать сетки кнопок, форм и других компонентов без сложного CSS.

Адаптивные возможности

Используя wrap и fill, ElSpace позволяет создавать адаптивные интерфейсы, которые корректно подстраиваются под размеры окна. При этом сохраняется равномерный отступ и аккуратное визуальное представление.

<el-space wrap fill size="medium">
  <el-button v-for="i in 8" :key="i">Кнопка {{ i }}</el-button>
</el-space>

Важные нюансы

  • ElSpace не создаёт контейнер для абсолютного позиционирования элементов.
  • Если элемент имеет display: block с полной шириной, его отступы могут вести себя иначе.
  • Для элементов с плавающей шириной лучше использовать fill или вложенные пространства.

Заключение по функциональности

Компонент ElSpace является гибким инструментом для упрощения верстки интерфейсов, позволяя управлять отступами и выравниванием элементов без прямого использования CSS. Использование всех пропсов (direction, size, wrap, fill, align) обеспечивает полную адаптивность и структурированность интерфейсов в Element Plus.

Оглавление