ContextMenu и DropdownMenu

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

ContextMenu

ContextMenu — это компонент, который отображается при взаимодействии с элементом через правую кнопку мыши или другое аналогичное событие. В SvelteKit реализация контекстного меню строится на комбинации контроля состояния и позиционирования DOM.

Основные свойства

  1. items — массив объектов меню. Каждый объект содержит:

    • label — текст пункта меню.
    • action — функция, выполняемая при выборе.
    • disabled — булевое значение, указывающее, можно ли выбрать пункт.

  2. position — координаты появления меню {x, y}.

  3. open — булево свойство состояния меню.

Реализация





  Правая кнопка мыши для вызова меню



{#if $menuOpen}
  
    
    {#each items as item}
      
  •  !item.disabled && item.action()}>
        {item.label}
      
    • 
    {/each}
  

{/if}

Особенности использования

  • Контекстное меню должно закрываться при клике вне его области. Для этого можно использовать глобальный обработчик document.addEventListener('click', ...).
  • Поддержка доступности требует навигации с клавиатуры: стрелки вверх/вниз и Enter для выбора.

DropdownMenu — стандартный компонент UI, позволяющий показывать список опций при клике на триггерный элемент. В SvelteKit библиотеки UI (например, svelte-headlessui или кастомные реализации) позволяют управлять состоянием открытого меню через store или bind:open.

Основные свойства

  1. trigger — элемент, открывающий меню (кнопка, иконка и т.д.).
  2. items — массив объектов меню с label, action, disabled.
  3. placement — позиция меню относительно триггера (bottom-start, top-end и т.д.).
  4. open — управляемое состояние видимости.

Пример реализации





{#if $dropdownOpen}
  
    
    {#each items as item}
      
  •  !item.disabled && item.action()}>
        {item.label}
      
    • 
    {/each}
  

{/if}

Лучшие практики

  • Для динамических данных меню использовать reactive statements $: для обновления списка опций.
  • Управление состоянием с помощью Svelte stores облегчает синхронизацию между компонентами.
  • Анимация открытия и закрытия через transition:fade или animate:flip делает интерфейс плавным и современным.
  • Доступность: триггер должен поддерживать aria-haspopup="menu" и aria-expanded.

Взаимодействие ContextMenu и DropdownMenu

  • ContextMenu обычно привязан к области DOM и появляется в точке клика пользователя.
  • DropdownMenu привязан к конкретному триггеру и имеет предсказуемое положение.
  • Оба компонента используют события мыши и клавиатуры, позиционирование, стили для hover/disabled состояния и могут быть интегрированы с анимациями и transition для улучшения UX.

Продвинутые техники

  1. Динамическое содержимое: Использование реактивных выражений позволяет менять пункты меню в зависимости от состояния приложения или выбранного элемента.

  2. Комбинированное меню: Контекстное меню может содержать вложенные DropdownMenu для сложных интерфейсов (подменю).

  3. Управление состоянием глобально: Если контекстное меню должно открываться на разных страницах или компонентах, рекомендуется использовать Svelte writable store для управления видимостью и положением.

  4. Кастомные ховер-эффекты и анимации: transition:scale и transition:fade делают выпадающие элементы более отзывчивыми, особенно на мобильных устройствах.

Оглавление