Responsive breakpoints

В Naive UI управление адаптивностью интерфейса строится на понятии breakpoints — точек, при которых макет и компоненты изменяют своё поведение в зависимости от ширины окна. Библиотека предоставляет гибкий механизм для работы с этими точками, что позволяет создавать интерфейсы, одинаково удобные как на мобильных устройствах, так и на больших экранах.

Определение и использование breakpoints

Breakpoints в Naive UI задаются через объект конфигурации темы:

import { createTheme } from 'naive-ui'

const theme = createTheme({
  breakpoints: {
    xs: '480px',
    sm: '768px',
    md: '992px',
    lg: '1200px',
    xl: '1600px'
  }
})

Каждая точка определяет минимальную ширину экрана, начиная с которой будут применяться соответствующие стили. Например, sm: '768px' означает, что при ширине окна от 768 пикселей включаются стили, предназначенные для среднего экрана.

Доступ к breakpoints в компонентах

Naive UI предоставляет реактивный объект $breakpoint, который позволяет проверять текущее состояние адаптивности прямо в шаблоне или скрипте:

import { useBreakpoints } from 'naive-ui'
import { computed } from 'vue'

export default {
  setup() {
    const breakpoints = useBreakpoints()

    const isMobile = computed(() => breakpoints.value.width < 768)
    const isTablet = computed(() => breakpoints.value.width >= 768 && breakpoints.value.width < 992)

    return {
      isMobile,
      isTablet
    }
  }
}

Здесь useBreakpoints возвращает объект с текущей шириной экрана, на основе которой можно формировать условные рендеры компонентов, менять размеры, видимость и даже стили.

Использование breakpoints в стилях

Naive UI интегрирует breakpoints с системой CSS-переменных и утилитами для стилей. Пример использования переменной темы для адаптивного размера компонента:

<n-button
  :size="$breakpoint.width < 768 ? 'small' : 'medium'"
>
  Кнопка
</n-button>

В данном примере размер кнопки динамически зависит от текущей ширины окна, что делает интерфейс гибким и адаптивным.

Динамическая настройка breakpoints

Breakpoints можно менять на лету, чтобы адаптировать интерфейс под разные сценарии использования:

theme.breakpoints.md = '1000px'

После изменения новой точки пересчёт текущих условий адаптивности происходит автоматически, что позволяет создавать темы с динамическими адаптивными точками.

Сценарии использования

  1. Мобильная навигация Переключение между вертикальной и горизонтальной панелью навигации при изменении ширины окна.

  2. Карточки и сетки Изменение количества колонок в n-grid или n-card в зависимости от ширины экрана:

<n-grid :cols="$breakpoint.width < 768 ? 1 : 3">
  <n-card v-for="item in items" :key="item.id">{{ item.title }}</n-card>
</n-grid>
  1. Текст и размеры элементов Автоматическая подстройка шрифтов и отступов в компонентах, чтобы обеспечить читаемость и удобство на любых устройствах.

Полезные рекомендации

  • Использовать reactive computed свойства для адаптивного отображения компонентов, а не только CSS-классы.
  • Минимизировать жёсткие привязки к конкретным размерам, отдавая предпочтение точкам breakpoints, определённым в теме.
  • При сложных макетах комбинировать breakpoints с компонентами n-grid и n-space, что позволяет сохранить гибкость и консистентность интерфейса.

Заключение по теме breakpoints

Breakpoints в Naive UI обеспечивают универсальную систему адаптивности, где точки смены макета легко настраиваются и используются как в логике компонентов, так и в их стилях. Реактивный доступ к текущей ширине экрана делает интерфейс полностью динамичным, а интеграция с системой темы позволяет централизованно управлять адаптивностью на всём проекте.

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

Оглавление