Layout основы

Библиотека Naive UI предоставляет мощный набор компонентов для построения современных интерфейсов на Vue 3, включая гибкую систему Layout, которая позволяет создавать адаптивные и структурированные страницы без необходимости вручную управлять CSS-сетками. Основные компоненты для построения макета — это n-layout, n-layout-header, n-layout-footer, n-layout-sider и n-layout-content.

Компонент n-layout

n-layout является корневым контейнером для всей структуры страницы. Он задаёт общий контекст для внутренних компонентов и управляет распределением пространства. Основные параметры:

  • has-sider (boolean) — указывает наличие боковой панели (n-layout-sider).
  • position (string: "static" | "relative" | "absolute" | "fixed" | "sticky") — задаёт позиционирование всего контейнера.

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

<n-layout has-sider>
  <n-layout-sider width="200">
    <!-- Боковая панель -->
  </n-layout-sider>
  <n-layout>
    <n-layout-header>Заголовок</n-layout-header>
    <n-layout-content>Основной контент</n-layout-content>
    <n-layout-footer>Футер</n-layout-footer>
  </n-layout>
</n-layout>

В этом примере боковая панель (n-layout-sider) занимает фиксированную ширину 200px, а оставшееся пространство распределяется между заголовком, контентом и футером.

Эти компоненты предназначены для верхней и нижней областей макета.

  • height — высота блока.
  • style — кастомизация внешнего вида (например, фон и отступы).
  • Поддерживают любые вложенные элементы Vue, включая кнопки, меню и логотипы.

Пример кастомного заголовка:

<n-layout-header style="background-color: #409eff; color: white; height: 60px;">
  Мой заголовок
</n-layout-header>

n-layout-sider

Боковая панель играет ключевую роль в навигационных интерфейсах. Особенности:

  • width (number | string) — ширина панели.
  • collapsed-width — ширина в свернутом состоянии.
  • collapsible (boolean) — возможность сворачивания.
  • show-trigger (boolean) — отображение кнопки сворачивания.
  • Поддержка динамического управления через v-model:collapsed.

Пример с коллапсом:

<n-layout-sider
  :collapsed="isCollapsed"
  collapsible
  show-trigger
  width="250"
  collapsed-width="64"
  v-model:collapsed="isCollapsed"
>
  <n-menu :options="menuOptions" />
</n-layout-sider>

В этом примере боковая панель может сворачиваться до ширины 64px, а состояние коллапса управляется реактивной переменной isCollapsed.

n-layout-content

Основной блок, занимающий оставшееся пространство после боковой панели, заголовка и футера.

  • Автоматически растягивается по доступной площади.
  • Можно задавать внутренние отступы через padding.
  • Поддерживает гибкую верстку с компонентами n-grid и n-space.

Пример:

<n-layout-content style="padding: 24px; background-color: #f5f5f5;">
  <n-card title="Пример контента">
    Здесь размещается основной контент страницы.
  </n-card>
</n-layout-content>

Вложенные Layout

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

<n-layout has-sider>
  <n-layout-sider width="200">Меню</n-layout-sider>
  <n-layout>
    <n-layout-header>Заголовок</n-layout-header>
    <n-layout has-sider>
      <n-layout-content>Основной контент</n-layout-content>
      <n-layout-sider width="300">Доп. панель</n-layout-sider>
    </n-layout>
    <n-layout-footer>Футер</n-layout-footer>
  </n-layout>
</n-layout>

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

Flex и адаптивность

Встроенные компоненты используют Flexbox для распределения пространства. Основные моменты:

  • n-layout по умолчанию применяет display: flex; flex-direction: row; при наличии боковой панели.
  • n-layout-content растягивается автоматически (flex: 1 1 auto).
  • Заголовок и футер фиксируются по высоте, не влияя на размер контента.

Для адаптивного дизайна важно использовать свойства width и collapsed-width у n-layout-sider и задавать максимальные и минимальные значения через CSS или style.

Взаимодействие с Vue 3

Все компоненты Layout полностью интегрируются с реактивностью Vue 3:

  • Сворачивание боковой панели через v-model.
  • Динамическая генерация меню и контента через реактивные массивы.
  • Возможность подключения слотов для сложных элементов, например, пользовательские панели инструментов или карточки.

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

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

const menuOptions = ref([
  { label: 'Главная', key: 'home' },
  { label: 'Профиль', key: 'profile' },
  { label: 'Настройки', key: 'settings' }
])
</script>

<n-menu :options="menuOptions" />

Основные рекомендации по использованию Layout

  1. Фиксированные размеры для боковой панели позволяют избежать “скачков” контента при ресайзе.
  2. Использовать has-sider только когда действительно нужна боковая панель.
  3. Слоты для заголовка и футера дают возможность создавать многоуровневые структуры.
  4. Комбинировать с n-space и n-grid для внутренних блоков контента — это упрощает создание адаптивных страниц.
  5. Использовать Flexbox возможности Naive UI вместо ручного написания CSS для макета.

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

Оглавление