Header, Footer, Aside, Content

Библиотека Naive UI предоставляет набор компонентов для построения гибких и адаптивных интерфейсов. Одними из ключевых элементов при разработке макетов являются Header, Footer, Aside и Content. Эти компоненты позволяют создавать полноценные страницы с четкой структурой, обеспечивая визуальное разделение областей и удобство навигации.

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

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

<template>
  <n-layout-header>
    <div class="logo">MyApp</div>
    <n-menu :options="menuOptions" mode="horizontal" />
  </n-layout-header>
</template>

<script setup>
import { NLayoutHeader, NMenu } from 'naive-ui'

const menuOptions = [
  { label: 'Главная', key: 'home' },
  { label: 'О нас', key: 'about' },
  { label: 'Контакты', key: 'contacts' }
]
</script>

<style scoped>
.logo {
  font-weight: bold;
  font-size: 18px;
  padding: 0 20px;
}
</style>

Ключевые особенности Header:

  • Поддержка горизонтальной и вертикальной навигации.
  • Возможность добавления кастомного контента, включая компоненты Naive UI (кнопки, аватары, меню).
  • Легкая интеграция с другими областями макета (Aside, Content, Footer).

Footer — нижняя панель страницы, предназначенная для отображения информации о компании, ссылок на политики, авторских прав или контактных данных. В Naive UI используется n-layout-footer.

Пример:

<template>
  <n-layout-footer>
    <div class="footer-text">
      © 2026 MyApp. Все права защищены.
    </div>
  </n-layout-footer>
</template>

<script setup>
import { NLayoutFooter } from 'naive-ui'
</script>

<style scoped>
.footer-text {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 10px 0;
}
</style>

Особенности Footer:

  • Можно фиксировать внизу страницы или оставлять подвижным в зависимости от высоты контента.
  • Поддерживает использование сетки для структурирования ссылок и информации.
  • Легко комбинируется с Header, Aside и Content для создания завершенного макета.

Aside

Aside — боковая панель, которая часто используется для навигации, фильтров, меню категорий и других вспомогательных элементов. Компонент n-layout-sider позволяет задавать фиксированную ширину, сворачиваемое меню и настраиваемую стилизацию.

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

<template>
  <n-layout>
    <n-layout-sider width="200">
      <n-menu :options="sideMenu" />
    </n-layout-sider>
    <n-layout-content>
      <router-view />
    </n-layout-content>
  </n-layout>
</template>

<script setup>
import { NLayout, NLayoutSider, NLayoutContent, NMenu } from 'naive-ui'

const sideMenu = [
  { label: 'Панель', key: 'dashboard' },
  { label: 'Отчеты', key: 'reports' },
  { label: 'Настройки', key: 'settings' }
]
</script>

Особенности Aside:

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

Content

Content — центральная область страницы, предназначенная для основного содержимого. Компонент n-layout-content обеспечивает гибкую работу с контентом, поддерживает адаптивность и возможность скроллинга.

Пример:

<template>
  <n-layout>
    <n-layout-sider width="200">
      <n-menu :options="sideMenu" />
    </n-layout-sider>
    <n-layout>
      <n-layout-header>Заголовок страницы</n-layout-header>
      <n-layout-content class="main-content">
        <div>
          Здесь размещается основной контент страницы: текст, таблицы, графики.
        </div>
      </n-layout-content>
      <n-layout-footer>© 2026 MyApp</n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<style scoped>
.main-content {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 400px;
}
</style>

Особенности Content:

  • Автоматически занимает доступное пространство между Header, Footer и Aside.
  • Поддерживает прокрутку при переполнении контента.
  • Легко интегрируется с другими компонентами Naive UI, такими как DataTable, Card, Grid.

Интеграция Header, Footer, Aside и Content

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

  • Header и Footer задают фиксированные зоны сверху и снизу.
  • Aside формирует боковую навигацию или панель инструментов.
  • Content автоматически подстраивается под оставшееся пространство.

Сочетание этих компонентов в одном n-layout обеспечивает адаптивность, удобство для пользователя и простоту масштабирования интерфейса.

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

Оглавление