OverflowMenu для скрытых опций

OverflowMenu в библиотеке Carbon Components Svelte представляет собой компонент, позволяющий организовать скрытые действия или опции интерфейса в компактном виде. Он особенно полезен, когда пространство ограничено, но необходимо предоставить пользователю доступ к дополнительным функциям.

Структура и использование

Компонент OverflowMenu состоит из контейнера и элементов меню (OverflowMenuItem). Контейнер отвечает за отображение кнопки с иконкой, обычно три точки («kebab menu»), и управление состоянием раскрытия меню.

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




   console.log('Action 1')}>
    Действие 1
  
   console.log('Action 2')}>
    Действие 2
  
   console.log('Удалить')}>
    Удалить

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

  • OverflowMenu автоматически управляет открытием и закрытием меню при клике по кнопке.
  • Элементы OverflowMenuItem можно связывать с функциями через события on:click.
  • Меню может содержать любое количество элементов, но рекомендуется структурировать их логически.

Настройка отображения

С помощью пропсов OverflowMenu предоставляет гибкость:

  • direction — направление раскрытия меню (bottom или top).
  • flipped — изменяет направление раскрытия, если меню не помещается на экране.
  • open — управление состоянием меню извне через биндинг.

Пример:


  Редактировать
  Удалить

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

Группировка и разделители

Для упорядочивания элементов можно использовать группировку и разделители. OverflowMenu поддерживает визуальное разделение элементов через компонент OverflowMenuItem с пропсом hasDivider.

Пример:


  Копировать
  Переместить
  Удалить
  • hasDivider добавляет горизонтальную линию перед элементом, что помогает визуально отделять группы действий.
  • Разделители повышают читаемость и структурируют меню.

Иконки и кастомизация элементов

Каждый элемент OverflowMenuItem может содержать иконку для улучшения визуальной идентификации действия. Для этого используется слот icon.


  
    
      
    
    Редактировать
  
  
    
      
    
    Удалить

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

  • Иконки могут быть любыми компонентами Svelte.
  • Слоты позволяют интегрировать SVG-иконки или готовые компоненты Carbon.
  • Комбинирование текста и иконки повышает удобство использования.

Управление событиями

OverflowMenu поддерживает несколько ключевых событий:

  • on:open — срабатывает при открытии меню.
  • on:close — срабатывает при закрытии меню.
  • on:click у элементов меню — для обработки действий.

Пример логирования:

 console.log('Меню открыто')} on:close={() => console.log('Меню закрыто')}>
   console.log('Редактирование')}>Редактировать

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

Доступность

OverflowMenu интегрирует стандарты доступности:

  • Поддержка клавиатурной навигации (Arrow Up/Down, Enter, Escape).
  • ARIA-атрибуты для правильного обозначения кнопки и состояния меню.
  • Фокус автоматически переходит на первый элемент при открытии и возвращается при закрытии.

Правильная реализация этих функций обеспечивает соответствие WCAG и улучшает опыт пользователей с особыми потребностями.

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

  1. Динамическое меню: создание элементов на основе массива данных.



  {#each actions as action}
     console.log(action)}>{action}
  {/each}
  1. Состояние элементов: отключение или скрытие отдельных пунктов.

  Архивировать
  Удалить
  • disabled блокирует элемент, предотвращая действия.
  • Можно комбинировать с условным рендерингом ({#if}) для скрытия элементов в зависимости от состояния приложения.

Оптимизация для больших списков

Для меню с большим количеством элементов рекомендуется:

  • Использовать ленивую генерацию элементов ({#each} с ограничением на рендер).
  • Разбивать меню на логические группы с разделителями.
  • Минимизировать количество иконок для ускорения рендеринга.

Такой подход предотвращает торможение интерфейса и сохраняет чистоту UX.

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

OverflowMenu поддерживает кастомизацию через классы и CSS-переменные:


  Редактировать
  • CSS-переменные Carbon позволяют изменять цвета, тени и размеры.
  • Классы обеспечивают тонкую настройку визуального вида для соответствия корпоративному стилю.
Оглавление