Mobile-first подход

Mobile-first — это стратегия разработки интерфейсов, при которой проектирование и стилизация приложения начинаются с мобильной версии. В контексте библиотеки Naive UI это означает оптимизацию компонентов и их поведения под маленькие экраны, с последующей адаптацией под планшеты и десктопы.

Naive UI предоставляет мощный инструмент для управления адаптивностью через встроенные пропсы и утилиты, позволяя создавать интерфейсы, которые естественно подстраиваются под размеры экрана.

Адаптивные компоненты и их настройка

В Naive UI большинство компонентов поддерживает реактивное управление размерами. Примеры ключевых компонентов:

  • NLayout и NLayoutContent — создают гибкие структуры, которые корректно меняют размеры при изменении viewport.
  • NGrid — сетка, где можно задавать колонки, адаптирующиеся под ширину экрана через пропсы responsive и cols.
  • NCard, NButton, NInput — компоненты с встроенной поддержкой масштабирования и размеров.

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

import { NGrid, NCard } from 'naive-ui';

<NGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4 }" :gutter="16">
  <NCard v-for="item in items" :key="item.id" title="Card">{{ item.content }}</NCard>
</NGrid>

Здесь xs, sm, md, lg обозначают размерные точки (breakpoints), что позволяет управлять количеством колонок на разных устройствах.

  • xs — экраны до 576px
  • sm — 576px–768px
  • md — 768px–992px
  • lg — 992px–1200px
  • xl — более 1200px

Управление видимостью компонентов

В Mobile-first подходе часто требуется показывать или скрывать элементы в зависимости от размера экрана. Naive UI позволяет это делать через v-show, реактивные вычисления и useBreakpoints().

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

import { useBreakpoints } from 'naive-ui';

const breakpoints = useBreakpoints();

const showSidebar = computed(() => breakpoints.md.value);

В этом примере боковая панель (Sidebar) отображается только на экранах среднего размера и больше. На мобильных устройствах она скрыта, что соответствует принципам Mobile-first.

Настройка размеров компонентов через пропсы

Naive UI позволяет задавать размеры компонентов напрямую:

  • size="small" — уменьшенный вариант для мобильных устройств
  • size="medium" — стандартный размер
  • size="large" — для десктопной версии

Для динамической адаптации под Mobile-first подход можно использовать реактивные вычисления:

<NButton :size="breakpoints.sm.value ? 'small' : 'medium'">Кнопка</NButton>

Масштабирование шрифтов и отступов

Mobile-first интерфейсы требуют гибкого управления типографикой и spacing. В Naive UI это делается через пропсы компонентов и CSS-переменные:

:root {
  --n-font-size: 14px; /* базовый размер для мобильных */
}

@media (min-width: 768px) {
  :root {
    --n-font-size: 16px; /* увеличение для планшетов */
  }
}

Для компонентов Naive UI пропсы size и style позволяют применять эти переменные, сохраняя консистентность на всех устройствах.

Использование адаптивных таблиц и списков

Компоненты NTable и NList поддерживают адаптивное отображение:

  • NTable: можно скрывать колонки через проп responsive или кастомные вычисления для мобильных экранов.
  • NList: автоматически подстраивает элементы в колонках или списке, обеспечивая вертикальный скролл вместо горизонтального.

Пример:

<NTable :columns="columns" :data="data">
</NTable>

Где в columns можно указать свойство showIn:

columns: [
  { title: 'Имя', key: 'name', showIn: ['sm', 'md', 'lg'] },
  { title: 'Email', key: 'email', showIn: ['md', 'lg'] }
]

Работа с интерактивными элементами

Для кнопок, селектов и форм Mobile-first подход подразумевает:

  • Увеличенные зоны клика (padding, min-width) для пальцев
  • Сокращенные текстовые поля на маленьких экранах
  • Использование модальных окон вместо отдельных страниц, чтобы уменьшить количество навигации

Пример кнопки с адаптивным размером:

<NButton :size="breakpoints.xs.value ? 'small' : 'medium'" @click="submitForm">
  Отправить
</NButton>

Использование утилит для адаптивности

Naive UI предоставляет утилиты:

  • useBreakpoints() — реактивная проверка текущего размера экрана
  • useMediaQuery() — позволяет привязывать логику к CSS media queries

Это позволяет создавать интерфейсы, которые естественно масштабируются и перестраиваются, что соответствует принципам Mobile-first.

Mobile-first подход в Naive UI — это сочетание адаптивных компонентов, реактивной логики размеров и продуманной типографики. Использование сеток, условного отображения и пропсов size позволяет строить интерфейсы, которые корректно работают на мобильных устройствах, а затем элегантно расширяются под планшеты и десктопы.

Оглавление