Context Menu

Общая информация

Context menu – это скрытое меню, которое появляется при нажатии правой кнопки мыши и представляет собой список команд и функций для выбранного объекта или элемента. В зависимости от объекта, для которого оно вызывается, меню может содержать разный функционал. Так же в нем могут дублироваться наиболее популярные возможности действия с элементом.

Анатомия

Шапка с заголовком (опционально)
Ячейки (команды)

Описание работы

Наполнение блока с ячейками

Контекстное меню может содержать вложения, группирующие элементы (папки).

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

Ячейки

Ячейки контекстного меню могут содержать текст или текст с поясняющей иконкой.

Так же могут иметь управляющие элементы, такие как кнопки-иконки (например, шеврон).

Порядок элементов списка

Если не определена приоритетность элементов списка, разместите их в алфавитном порядке.

Переполнение содержимого строки

Рекомендуем описывать вариант в одной строке.

Если текст слишком длинный и не вмещается в одну строку, добавьте многоточие (…). В таком случае при наведении на строку через 400 мс появляется всплывающая подсказка, отображающая всю строку текста.

Скролл

Максимальное количество отображаемых элементов в контекстном меню - 10. Но это число может увеличиваться в зависимости от конкретного кейса.

Если все ячейки не вмещаются, то для просмотра (прокрутки) содержимого используется скролл. Скролл появляется при наведении на область контекстного меню.

Чтобы визуально дать понять пользователю, что список можно прокрутить, отображаем 50% от высоты последней строки “в зоне видимости”.  

Контентная часть, при появлении скролла, не смещается.

Интерактивность

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

Раскрытие context menu осуществляется по клику правой кнопкой мыши на элементе UI.

Скрытие осуществляется за счет клика левой кнопкой мыши в любом другом месте.

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

Размеры

Внешние размеры

Рекомендуемая высота контекстного меню не должна превышать 10-ти строк с ячейками, не включая заголовочные блоки и блоки с кнопками. При появлении сколла, отображаем 50% от высоты последней строки “в зоне видимости”. Ширина зависит от решаемой задачи и наполнения. Минимальная ширина - 120рх.

Элемент

Значение

Типографика

Элемент

Название стиля

Гарнитура

Кегль

Начертание

Внутренние размеры

Вертикальные отступы в заголовочном блоке и блоке с ячейками по 16рх:

Горизонтальные отступы 16рх:

Заголовочный блок - 52рх
Ячейка - 40рх

Состояния

Ячейки контекстного меню имеют 4 основных состояния:

Default. Состояние по умолчанию
Hover. При наведении
Active. Выбранная ячейка
Hover + Active. Выбранная ячейка при наведении

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора ячейки с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием.

При переходе к меню клавишей Tab первая ячейка получает фокус — появляется рамка голубого цвета.  Стрелками можно перемещать фокус между ячейками.  Если нажать клавишу Enter — произойдет выбор ячейки, находящейся в фокусе в настоящий момент. И дальнейшие действия зависят от типа ячейки.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.

Цвета

Общие цвета