Dropdown Menu

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

Dropdown menu – это выпадающее меню с набором доступных команд, которое появляется при клике на вызывающий элемент (например: инпут или иконка). В зависимости от объекта, для которого оно вызывается, меню может иметь разное содержимое.

Анатомия

Шапка с заголовком (опционально)
Ячейки: команды / контекст
Футер с кнопой (опционально)

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

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

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

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

Для больших списков рекомендуем использовать поле поиска внутри выпадающего меню:

В некоторых случаях изменение выбора требует высокой нагрузки системы (перерасчет / обращение к огромным объемам данных и т.п.), что влияет на время отклика.

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

Ячейки

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

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

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

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

Рекомендуется выбранные элементы:

оставлять на своем месте, если длина списка < 16 элементов
перемещають на верх списка, если его длина > 16 элементов.

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

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

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

Положение списка

В зависимости от положения на экране, выпадающий список может открываться вверх. Например, если форма размещена внизу и близко к краю интерфейса, выпадающий список разворачивается вверх, чтобы его содержимое не было “обрезано”.

По умолчанию dropdown menu открывается вниз.

Скролл

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

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

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

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

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

Раскрытие и скрытие списка dropdown menu зависит от решаемой задачи и может осуществляться по клику на вызывающий элемент (например, поле ввода, кнопка-иконка на панели и т.д.).

В зависимости от типа списка определяется формат его скрытия.

Текстовый список

Скрытие выпадающего меню с текстовыми ячейками происходит:

с сохранением изменений:

по клику на выбранную ячейку

без сохранения изменений:

по клику на шеврон
по клику вне формы ввода или списка

Список с чекбоксами

Скрытие выпадающего меню с чекбоксами происходит:

с сохранением изменений:

по клику на кнопку “Сохранить”

без сохранения изменений:

по клику на кнопку “Оменить”
по клику на шеврон
по клику вне формы ввода или списка

Список с радиокнопками

Если dropdown menu содержит RadioButton, то по клику на ячейку происходит выбор и сохранение изменений.

Скрытие выпадающего меню с радиокнопками происходит:

по клику на форму ввода или шеврон по клику вне формы
ввода или списка

Список с тоглами

Скрытие выпадающего меню с тоглами происходит:

с сохранением изменений:

по клику на кнопку “Сохранить”

без сохранения изменений:

по клику на кнопку “Оменить”
по клику на управляющий элемент
по клику вне выпадающего списка

Типы ячеек

Существуют 6 основных типов ячеек, каждая имеет по 4 состояния. В некотрых случаях, наполнения могут группироваться между собой.

Text

Стандартная текстовая ячейка.

Checkbox

Ячейка содержащая чекбокс с текстом. Используется для мультивыбора.

Radiobutton

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

Toggle

Ячейка содержащая тогл с текстом.

Icon

Ячейка с иконкой.

Hierarchy

Ячейка с чипсом.

С мультивыбором

Без мультивыбора

Размеры

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

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

Ширина зависит от вызываемого элемента:

если вызываемый элемент инпут - ширина dropdown menu должна равняться ширине инпута
в остальных случаях минимальная ширина - 120рх

Элемент

Значение

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

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

Если зоголовок находится в блоке с ячейками он отбивается отступом 8px:

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

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

Состояния

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

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

Фокус (Focus)

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

При переходе к меню клавишей Tab первая ячейка получает фокус — появляется рамка голубого цвета.  

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

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

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