Горизонтальное меню

В библиотеке Naive UI создание горизонтального меню строится вокруг компонента n-menu. Этот компонент позволяет строить многоуровневые навигационные структуры с поддержкой иконок, подменю и различных стилей отображения. Для горизонтального меню ключевым параметром является свойство mode, которое принимает значение 'horizontal'.

import { createApp } from 'vue';
import { NMenu, NMenuItem } from 'naive-ui';

const app = createApp({
  template: `
    <n-menu :options="menuOptions" mode="horizontal" />
  `,
  data() {
    return {
      menuOptions: [
        { label: 'Главная', key: 'home' },
        { label: 'О нас', key: 'about' },
        { label: 'Контакты', key: 'contact' }
      ]
    };
  }
});

app.mount('#app');

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

  • mode="horizontal" — переключает меню из вертикального стандартного режима в горизонтальный.
  • options — массив объектов, определяющих структуру меню.
  • Каждый объект меню может содержать следующие свойства: label, key, icon, children.

Подменю в горизонтальном меню

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

const menuOptions = [
  {
    label: 'Продукты',
    key: 'products',
    children: [
      { label: 'Продукт A', key: 'productA' },
      { label: 'Продукт B', key: 'productB' }
    ]
  },
  { label: 'О нас', key: 'about' },
  { label: 'Контакты', key: 'contact' }
];

Особенности подменю:

  • Горизонтальное меню поддерживает несколько уровней вложенности.
  • По умолчанию подменю открывается при наведении, но можно изменить поведение через слоты или обработчики событий.

Настройка стилей и тем

Naive UI предлагает гибкую систему стилизации, которая позволяет управлять цветами, отступами, размерами и шрифтами меню через theme overrides. Для горизонтального меню особенно важно контролировать высоту строки и интервалы между пунктами меню.

import { createTheme } from 'naive-ui';

const customTheme = createTheme({
  Menu: {
    itemHeight: '50px',
    itemFontSize: '16px',
    itemTextColor: '#333',
    itemTextColorHover: '#1f6feb',
    itemTextColorActive: '#0d3b87'
  }
});

Свойства темы для горизонтального меню:

  • itemHeight — высота одного пункта меню.
  • itemFontSize — размер текста.
  • itemTextColorHover — цвет текста при наведении.
  • itemTextColorActive — цвет активного пункта.

Обработка событий и реактивность

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

<n-menu
  :options="menuOptions"
  mode="horizontal"
  @update:value="handleSelect"
/>

methods: {
  handleSelect(key) {
    console.log('Выбран пункт меню:', key);
  }
}

Особенности событий:

  • @update:value — срабатывает при выборе пункта меню.
  • key — уникальный идентификатор выбранного пункта.
  • Возможна привязка состояния выбранного пункта к реактивной переменной Vue.

Использование иконок в горизонтальном меню

Добавление иконок делает меню более визуально понятным. В Naive UI можно использовать встроенные компоненты иконок или сторонние библиотеки.

import { NIcon } from 'naive-ui';
import { HomeOutlined } from '@vicons/antd';

const menuOptions = [
  { label: 'Главная', key: 'home', icon: () => h(NIcon, null, { default: () => h(HomeOutlined) }) },
  { label: 'О нас', key: 'about' }
];

Особенности работы с иконками:

  • Использование функции () => h(...) позволяет рендерить иконку динамически.
  • Иконки можно комбинировать с подменю для создания визуальной иерархии.
  • Размер и цвет иконок контролируется через theme overrides.

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

Для адаптивного дизайна горизонтальное меню можно сочетать с компонентами n-dropdown или n-popover для компактного отображения на мобильных устройствах. Это позволяет скрывать пункты в выпадающий список при уменьшении ширины экрана.

<n-menu :options="menuOptions" mode="horizontal" collapsed-width="0" />

Особенности адаптивного меню:

  • collapsed-width задает ширину, при которой меню автоматически сворачивается.
  • Поддерживается кастомизация через CSS-переменные и theme overrides.
  • Можно интегрировать с n-drawer для мобильного раскрытия меню.

Резюме по функционалу горизонтального меню

Горизонтальное меню в Naive UI сочетает:

  • Простую настройку через mode="horizontal" и options.
  • Поддержку многоуровневых подменю с hover-эффектами.
  • Полную кастомизацию через theme overrides.
  • Возможность добавления иконок и реактивной обработки выбора.
  • Адаптивность для различных размеров экранов и устройств.

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

Оглавление