Порядок элементов

Библиотека Element Plus предоставляет широкий набор компонентов для построения интерфейсов на Vue 3. Порядок элементов в пользовательском интерфейсе напрямую влияет на восприятие и удобство использования приложения. В Element Plus порядок элементов определяется как на уровне разметки Vue, так и через специальные утилиты для управления layout, spacing и позиционированием.

Контейнеры и сетка

Для организации компонентов используются контейнеры el-row и el-col. Они создают гибкую сетку, позволяя управлять порядком и расположением элементов:

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-button type="primary">Кнопка 1</el-button>
    </el-col>
    <el-col :span="8">
      <el-button type="success">Кнопка 2</el-button>
    </el-col>
    <el-col :span="8">
      <el-button type="warning">Кнопка 3</el-button>
    </el-col>
  </el-row>
</template>
  • gutter – задаёт промежуток между колонками.
  • Порядок колонок в строке определяется порядком <el-col> в разметке.
  • Использование свойства :span задаёт ширину колонки в рамках 24-частной сетки.

Для динамического изменения порядка колонок можно использовать Flex-свойства, доступные через атрибут justify и align у el-row:

  • justify="start|center|end|space-between|space-around|space-evenly" — горизонтальное выравнивание.
  • align="top|middle|bottom" — вертикальное выравнивание.

Позиционирование компонентов

Element Plus активно использует CSS Flexbox и Grid для управления порядком компонентов. Компоненты с display: flex поддерживают свойство order, которое позволяет менять визуальный порядок без изменения разметки:

<template>
  <el-row type="flex" justify="start">
    <el-col :span="8" :style="{ order: 2 }">
      <el-card>Карточка B</el-card>
    </el-col>
    <el-col :span="8" :style="{ order: 1 }">
      <el-card>Карточка A</el-card>
    </el-col>
  </el-row>
</template>
  • order – целочисленное значение, по которому элементы сортируются. Элемент с меньшим значением отображается первым.
  • Это особенно полезно для адаптивного интерфейса, когда на мобильных устройствах порядок элементов должен отличаться от десктопного.

Использование группировки компонентов

Компоненты Element Plus поддерживают группировку, что влияет на их визуальный и логический порядок:

  • el-button-group — объединяет кнопки, отображая их в единой линии.
  • el-radio-group и el-checkbox-group — группируют элементы формы и управляют их поведением как единого блока.

Пример упорядочивания кнопок с использованием группы:

<template>
  <el-button-group>
    <el-button type="primary">Сохранить</el-button>
    <el-button type="danger">Удалить</el-button>
    <el-button>Отмена</el-button>
  </el-button-group>
</template>

В данном случае порядок кнопок определяется их последовательностью внутри <el-button-group>.

Адаптивное управление порядком

Element Plus позволяет использовать CSS-классы для адаптивности, чтобы изменять порядок компонентов на разных разрешениях:

<template>
  <el-row class="responsive-order">
    <el-col :span="12" class="order-2-md">
      <el-card>Контент B</el-card>
    </el-col>
    <el-col :span="12" class="order-1-md">
      <el-card>Контент A</el-card>
    </el-col>
  </el-row>
</template>

<style>
@media (min-width: 768px) {
  .order-1-md { order: 1; }
  .order-2-md { order: 2; }
}
</style>
  • Такой подход позволяет менять порядок элементов только на определённых устройствах.
  • Сохраняется логика и семантика разметки, что улучшает доступность.

Компоненты с динамическим порядком

Некоторые компоненты Element Plus сами управляют порядком вложенных элементов:

  • el-menu — элементы меню выводятся в том порядке, в котором они перечислены в разметке или массиве данных.
  • el-tabs — порядок вкладок соответствует их порядку в <el-tab-pane>.
  • el-table — колонки таблицы могут быть переставлены динамически через v-for и массив конфигурации.

Пример динамического таба:

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    ></el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('first');
const tabs = ref([
  { name: 'first', label: 'Вкладка 1' },
  { name: 'second', label: 'Вкладка 2' },
]);
</script>
  • Порядок вкладок полностью управляется массивом tabs.
  • Изменение последовательности элементов в массиве автоматически изменяет порядок в интерфейсе.

Выводы о порядке элементов

  • Порядок элементов в Element Plus можно управлять как на уровне разметки, так и через CSS-свойства (order, justify, align).
  • Группировка компонентов упрощает управление визуальным порядком.
  • Для адаптивных интерфейсов рекомендуется использовать медиа-запросы и динамические классы.
  • Компоненты, работающие с коллекциями данных (el-tabs, el-menu, el-table), позволяют изменять порядок элементов через массив данных.

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

Оглавление