Context Menu
Last updated
Was this helpful?
Last updated
Was this helpful?
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 отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
Общие цвета
Фон контекстного меню: #FFFFFF — G1
Обводка: #D6DBE7 — G3
Разделители: #D6DBE7 — G3
Заголовок: #777B92 — G7
