Responsive дизайн

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

Использование Grid и Flex для адаптивной верстки

Naive UI предоставляет компоненты n-grid и n-grid-item, которые позволяют создавать гибкие сетки с настройкой колонок, отступов и выравнивания.

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

<n-grid :cols="3" :gap="16">
  <n-grid-item v-for="i in 6" :key="i">
    <n-card :title="`Элемент ${i}`">Содержимое</n-card>
  </n-grid-item>
</n-grid>

Ключевые моменты:

  • cols — количество колонок. Можно использовать объект для адаптивного поведения:

    :cols="{ xs: 1, sm: 2, md: 3, lg: 4 }"

    где xs, sm, md, lg соответствуют различным breakpoint-ам.

  • gap — отступ между элементами сетки.

  • n-grid-item автоматически адаптируется к ширине родителя.

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

Многие компоненты Naive UI поддерживают адаптивные пропсы, позволяющие менять размеры, отображение или поведение в зависимости от размера экрана.

Пример с компонентом n-button:

<n-button :size="{ xs: 'small', sm: 'medium', lg: 'large' }">
  Кнопка
</n-button>

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

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

Naive UI предоставляет Composition API хук useResponsive, который позволяет отслеживать текущий breakpoint и реагировать на изменение ширины окна:

import { useResponsive } from 'naive-ui'

export default {
  setup() {
    const { xs, sm, md, lg } = useResponsive()
    
    return { xs, sm, md, lg }
  }
}

Пример условного рендера:

<n-card>
  <template #default>
    <div v-if="md || lg">Большой экран: расширенное содержимое</div>
    <div v-else>Малый экран: упрощенное содержимое</div>
  </template>
</n-card>

Хук автоматически обновляет значения при изменении ширины окна.

Работа с адаптивной типографикой и отступами

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

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

<n-card :style="{ padding: theme.padding }">
  <n-typography :style="{ fontSize: theme.fontSize }">
    Адаптивный текст
  </n-typography>
</n-card>

Используя комбинацию хука useResponsive и theme, можно динамически изменять стиль компонентов под разные экраны.

Адаптивные таблицы и списки

Для таблиц используется компонент n-data-table, который поддерживает адаптивность через проп scrollable и настройку видимых колонок:

<n-data-table
  :columns="columns"
  :data="data"
  :scrollable="{ x: '100%' }"
/>

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

const columns = [
  { title: 'ID', key: 'id', show: true },
  { title: 'Имя', key: 'name', show: sm || md || lg },
  { title: 'Email', key: 'email', show: md || lg }
]

Адаптивные меню и панели

Компоненты n-menu и n-drawer позволяют создавать адаптивные панели навигации:

  • n-drawer можно использовать для мобильного меню, которое появляется при маленькой ширине экрана.
  • n-menu поддерживает вертикальное и горизонтальное расположение, которое можно менять динамически:
<n-menu :mode="xs ? 'vertical' : 'horizontal'" :options="menuOptions" />

Анимации и плавная адаптация

Naive UI интегрирует переходы и анимации, которые помогают интерфейсу плавно подстраиваться под изменения размеров экрана. Используются стандартные Vue transition-компоненты:

<transition name="fade">
  <n-card v-if="lg">Контент для большого экрана</n-card>
</transition>

Комбинация анимаций и адаптивных пропсов обеспечивает современный и отзывчивый интерфейс.

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

  1. Всегда использовать сетку n-grid для основного макета.
  2. Применять useResponsive для условий отображения компонентов.
  3. Использовать адаптивные пропсы вместо медиазапросов в CSS там, где это возможно.
  4. Скрывать или менять компоненты на малых экранах для упрощения интерфейса.
  5. Объединять theme и responsive-хуки для динамической адаптивной типографики и отступов.

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

Оглавление