Точки останова

Точки останова (breakpoints) — это основа адаптивного дизайна в Element Plus. Они позволяют управлять отображением компонентов в зависимости от ширины экрана, обеспечивая корректное поведение интерфейса на устройствах различного размера. В Element Plus система точек останова тесно интегрирована с сеточной системой ElRow и ElCol, а также с некоторыми вспомогательными утилитами, такими как useBreakpoint из Composition API.

Системы точек останова

Element Plus использует стандартные размеры экранов для точек останова:

Ключ Минимальная ширина экрана Использование
xs 0px мобильные устройства
sm 576px небольшие планшеты
md 768px стандартные планшеты
lg 992px ноутбуки
xl 1200px большие мониторы
xxl 1600px очень большие дисплеи

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

Применение точек останова в сетке

Сетка Element Plus строится на принципе 24 колонок, управляемых через компонент ElCol. Основное свойство для управления адаптивностью — объект с ключами точек останова.

Пример:

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      Контент колонки
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      Контент колонки
    </el-col>
  </el-row>
</template>

Объяснение:

  • На экранах xs каждая колонка занимает всю ширину (24/24).
  • На sm — половину ширины (12/24).
  • На md — треть (8/24).
  • На lg — четверть (6/24).

Таким образом, сетка адаптируется автоматически под размер экрана.

Динамическая работа с точками останова через Composition API

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

Пример использования:

<script setup>
import { useBreakpoint } from 'element-plus'

const breakpoints = useBreakpoint()

watchEffect(() => {
  console.log('Текущий брейкпоинт:', breakpoints.value)
})
</script>
  • breakpoints.value возвращает объект с булевыми значениями для каждой точки останова.
  • Можно использовать для условного рендеринга компонентов:
<template>
  <div>
    <p v-if="breakpoints.md">Контент для планшетов и выше</p>
    <p v-else>Контент для мобильных</p>
  </div>
</template>

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

Для быстрого управления видимостью элементов на разных экранах применяются утилитарные классы:

  • is-hidden-xs, is-hidden-sm — скрыть элемент на соответствующих точках останова.
  • is-visible-md, is-visible-lg — показать только на указанных размерах.

Пример:

<div class="is-hidden-xs is-hidden-sm">Скрыто на мобильных</div>
<div class="is-visible-md">Только для планшетов</div>

Комбинирование точек останова с компонентами

  1. Кнопки и панели инструментов: можно показывать сокращённые версии кнопок на мобильных устройствах.
  2. Таблицы (ElTable): скрытие некоторых колонок на маленьких экранах через динамическое условие v-if="breakpoints.md".
  3. Формы (ElForm): изменение ширины полей формы через ElCol и соответствующие точки останова.
<el-form :model="form" label-width="120px">
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12">
      <el-form-item label="Имя">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-col>
    <el-col :xs="24" :sm="12">
      <el-form-item label="Email">
        <el-input v-model="form.email" />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

Такой подход обеспечивает компактное отображение на маленьких экранах и удобную разметку на больших.

Настройка пользовательских точек останова

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

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus, {
  size: 'medium',
  breakpoint: {
    xs: 0,
    sm: 600,
    md: 900,
    lg: 1200,
    xl: 1536
  }
})

app.mount('#app')
  • Позволяет подгонять адаптивность под специфические требования проекта.
  • Особенно полезно для интерфейсов с нестандартными макетами.

Практические рекомендации

  • Использовать сетку с точками останова всегда для крупных макетов.
  • useBreakpoint применять для условного рендеринга и логики компонентов.
  • Скрытие и показ элементов через утилитарные классы повышает читаемость кода.
  • Настройка кастомных брейкпоинтов рекомендуется при специфических дизайнерских требованиях.

Эффективное применение точек останова делает интерфейс гибким и удобным на любых устройствах, обеспечивая корректное масштабирование и сохранение структуры компонентов.

Оглавление