Menus

Меню является одним из ключевых элементов пользовательского интерфейса, позволяя организовать навигацию, действия и управление контентом. В контексте SvelteKit UI libraries меню реализуются через готовые компоненты с богатым набором API, поддержкой реактивности и доступностью (accessibility).

Основные концепции меню

1. Компонент Menu В большинстве UI библиотек для SvelteKit меню представлено как контейнер, содержащий MenuTrigger и MenuContent:

<Menu>
  <MenuTrigger>
    <button>Открыть меню</button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem>Пункт 1</MenuItem>
    <MenuItem>Пункт 2</MenuItem>
    <MenuItem disabled>Пункт 3 (неактивен)</MenuItem>
  </MenuContent>
</Menu>
  • MenuTrigger — элемент, по которому происходит открытие меню.
  • MenuContent — блок с пунктами меню.
  • MenuItem — отдельный пункт меню, который может быть кликабельным или неактивным.

Реактивность и управление состоянием

Меню в SvelteKit может управляться через bind к состоянию открытости:

<script>
  let open = false;
</script>

<Menu bind:open>
  <MenuTrigger>
    <button>Меню {open ? 'Открыто' : 'Закрыто'}</button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem on:click={() => open = false}>Закрыть меню</MenuItem>
  </MenuContent>
</Menu>
  • bind:open позволяет синхронизировать состояние меню с переменной.
  • Управление состоянием через реактивные переменные упрощает интеграцию с другими компонентами интерфейса.

Поддержка клавиатурной навигации

Для доступности меню важно, чтобы оно корректно реагировало на клавиатурные события:

  • ArrowDown / ArrowUp — перемещение по пунктам меню.
  • Enter / Space — активация пункта меню.
  • Escape — закрытие меню.

В SvelteKit UI компоненты меню автоматически обрабатывают эти события, но при необходимости можно добавлять собственные обработчики:

<Menu on:keydown={(e) => console.log(e.key)}>
  ...
</Menu>

Группы и разделители

Меню часто включает логические группы и разделители для улучшения читаемости:

<MenuContent>
  <MenuGroup label="Основные действия">
    <MenuItem>Создать</MenuItem>
    <MenuItem>Редактировать</MenuItem>
  </MenuGroup>
  <MenuSeparator />
  <MenuGroup label="Дополнительно">
    <MenuItem>Настройки</MenuItem>
    <MenuItem>Справка</MenuItem>
  </MenuGroup>
</MenuContent>
  • MenuGroup — группировка пунктов с опциональной меткой.
  • MenuSeparator — визуальное разделение между группами или логическими блоками.

Подменю (Submenu)

Сложные интерфейсы требуют вложенных меню. SvelteKit UI библиотеки поддерживают SubMenu, позволяя создавать иерархические структуры:

<Menu>
  <MenuTrigger>
    <button>Главное меню</button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem>Пункт 1</MenuItem>
    <SubMenu>
      <SubMenuTrigger>Дополнительно</SubMenuTrigger>
      <SubMenuContent>
        <MenuItem>Подпункт 1</MenuItem>
        <MenuItem>Подпункт 2</MenuItem>
      </SubMenuContent>
    </SubMenu>
  </MenuContent>
</Menu>
  • SubMenuTrigger открывает вложенное меню.
  • SubMenuContent содержит подпункты.

Стилизация и темы

Меню в SvelteKit UI libs поддерживает кастомизацию через CSS-переменные, классы и встроенные пропсы:

<MenuContent class="custom-menu">
  <MenuItem class="highlighted">Особый пункт</MenuItem>
</MenuContent>

<style>
  .custom-menu {
    background-color: #1f2937;
    color: white;
    border-radius: 8px;
    padding: 8px;
  }
  .highlighted {
    font-weight: bold;
  }
</style>
  • Позволяет адаптировать меню под дизайн-систему проекта.
  • Можно применять динамические классы с реактивными переменными Svelte.

Меню с динамическими пунктами

Меню часто строится на основе данных из массива:

<script>
  const items = ['Создать', 'Редактировать', 'Удалить'];
</script>

<Menu>
  <MenuTrigger>
    <button>Действия</button>
  </MenuTrigger>
  <MenuContent>
    {#each items as item}
      <MenuItem>{item}</MenuItem>
    {/each}
  </MenuContent>
</Menu>
  • Использование {#each} обеспечивает простое создание динамических списков.
  • Можно комбинировать с фильтрацией или сортировкой для продвинутого UX.

Анимация открытия/закрытия

Для плавного UX меню поддерживают анимацию через transition:

<MenuContent transition:fade>
  <MenuItem>Пункт 1</MenuItem>
  <MenuItem>Пункт 2</MenuItem>
</MenuContent>

<script>
  import { fade } from 'svelte/transition';
</script>
  • fade — встроенная анимация Svelte.
  • Можно использовать slide, scale или кастомные функции перехода.

Программное управление

Меню может открываться или закрываться программно через методы API:

<Menu bind:open>
  <MenuTrigger>
    <button on:click={() => open = !open}>Тоггл меню</button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem on:click={() => console.log('Пункт выбран')}>Пункт</MenuItem>
  </MenuContent>
</Menu>
  • Позволяет интегрировать меню с другими событиями приложения.
  • Удобно для сложных интерфейсов, где меню зависит от состояния других компонентов.

Доступность (Accessibility)

Меню поддерживают ARIA атрибуты:

  • role="menu" для контейнера меню.
  • role="menuitem" для пунктов.
  • aria-disabled="true" для неактивных элементов.

SvelteKit UI компоненты автоматически устанавливают нужные атрибуты, обеспечивая корректную работу с экранными читалками и клавиатурной навигацией.

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

Оглавление