Всплывающее меню

Всплывающее меню

Использование

Всплывающее меню появляется поверх всего прочего контента на странице и отображает список действий внутри приложения для текущей страницы приложения или конкретного элемента приложения (в качестве контекстного меню).

В меню располагается один или несколько элементов (PopupMenuItem), которые передают команду или состояние, влияющие на отображаемый контент. При нажатии на пункт меню выполняется соответствующее действие. После выполнения действия, всплывающее меню может сразу закрыться, либо не закрываться, если того требует дизайн.

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

Взаимодействие с PopUp Menu

PopUp Menu может быть вызванно нажатием, жестом быстрого доступа по элементам управления Панели приложения, коротким или долгим нажатием по другим элементам страницы приложения (кнопки, элементы списка и т. д.).

Первоначальная высота PopUp меню, вызванного в нижней части экрана может быть ограничена (см. Габариты) для быстрого доступа к верхним пунктам, а затем увеличиваться пользователем вверх. В этих случаях в меню присутствует индикатор-ручка. Этот элемент дает пользователю понять, что можно:

раскрыть меню полностью, пролистав список пунктов вверх;
вытянуть его за ручку на нужную пользователю высоту.

Таким же образом работает и обратный процесс скрытия меню — смахивание в обратную сторону по списку внутри меню или по ручке.

При этом точка привязки и точка изначального появления не меняется и меню вытягивается/стягивается из той же точки, откуда появилось.

Раскрытие меню полностью, скроллом списка пунктов:

Раскрытие меню вытягиванием его за ручку на нужную высоту:

Основное

Габариты

Высота PopUp меню может быть определена разработчиком. По умолчанию она определяется как сумма количества пунктов меню и внутренних отступов. Максимальная высота PopUp-меню ограничивается высотой экрана и внешними отступами.

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

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



`ScrollDecorator` отображается	`ScrollDecorator` скрыт

Ширина PopUp меню для телефонных интерфейсов и узких страниц в режиме SplitView (менее 1/3 большей стороны экрана) определяется разработчиком. Максимальная ширина меню равна ширине экрана за вычетом отступов (4dp для Popup Menu, вызванного из AppBar, и PageMargin для Popup Menu, вызванного другими элементами управления). Рекомендуемая ширина равна ширине, вмещающей в себя максимально длинный пункт меню + внутренние отступы.

Для Popup Menu, вызванного жестом быстрого доступа, ширина всегда фиксирована в её максимальном значении.

Для планшетных версий (не в режиме SplitView) рекомендуемая ширина PopUp меню равна:

для ландшафтных ориентаций: PageWidth/3 - PageMargin;
для портретных: PageHeigh/3 - PageMargin.

Позиционирование

Во всех случаях, кроме вызова всплывающего меню жестом быстрого доступа, элемент выравнивается относительно элемента управления, вызвавшего его (примеры на иллюстрациях ниже) в той стороне экрана, где больше свободного пространства (зеленая область). При этом объект, вызвавший меню, не должен быть перекрыт. Исключением являются случаи, когда PopUp перекрывает меню во избежание добавления скролла, если не хватает места для 1-2 элементов меню.

Приоритет размещения PopUp всегда — ниже элемента, но только, если место позволяет полноценно разместить там меню.


Всплывающее меню над элементом	Всплывающее меню под элементом

Всплывающее меню поверх элемента	Меню, вызванное жестом быстрого доступа из AppBar


Всплывающее меню в ландшафтной ориентации экрана

Анатомия компонента

Всплывающее меню должно обязательно содержать:

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

Всплывающее меню может содержать:

горизонтальный блок с кнопками-иконками;
заголовок, который может использоваться с фоном или без (если это первый уровень меню);
группировку пунктов в смысловые блоки;
разделители;
ручку вытягивания меню.

Наполнение

Элементами PopUp меню являются пункты типа PopUpMenu Item (текстовые лейблы, возможно, с текстом-подсказкой), которые можно сочетать c иконкой iconSizeSmallPlus слева или справа, либо с элементом Switch справа от лейбла. Также возможно размещение в нижнем блоке меню группы с кнопками-иконками.

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

Помимо контролов возможно также использование навигационного элемента — заголовка, который может использоваться на усмотрение разработчика — как с фоном, так и без. Заголовок опционален на первом уровне меню и обязателен на всех вложенных уровнях. При этом на вложенных уровнях он кликабелен и нажатие по нему вернёт пользователя на уровень вверх.

Заголовок (Popup Menu Header)

Заголовок в меню опционален во всех случаях, кроме того, когда пользователь находится не на верхнем уровне меню. В этом случае заголовок обязательно демонстрируется в сочетании с иконкой icon-m-left и является кнопкой перехода на уровень вверх.

Заголовок зафиксирован в верхней позиции, и при прокрутке пунктов список уходит под него.


Заголовок с разделителем	Заголовок с разделителем и фоном

Заголовок может быть использован как с фоном, так и без него, но наличие линии-разделителя по нижней границе в нём обязательно.

Если пользователь находится на втором и более уровне меню, то наличие кнопки-индикатора в нём обязательно.



Меню первого уровня	Меню второго уровня	Меню третьего уровня

Если заголовок располагается на втором или более уровне, то он обязательно кликабелен и имеет состояние Pressed.

Пункты (Popup Menu Items)

Типы Popup Menu Items, размещаемых в Popup Menu:

Текстовая метка (или текстовый лейбл+подсказка).

Текстовая метка (или текстовый лейбл+подсказка) + иконка слева.

Текстовая метка (или текстовый лейбл+подсказка) + иконка справа.

Текстовая метка (или текстовый лейбл+подсказка) + иконка справа и слева.

Текстовая метка (или текстовый лейбл+подсказка) + Switch справа.

Текстовая метка (или текстовый лейбл+подсказка) + иконка слева и Switch справа.

Горизонтальный блок кнопок

В нижней части Popup Menu может располагаться блок с кнопками-иконками, максимальное количество которых не должно превышать 6 штук. Этот блок может быть зафиксированным в нижней части панели, и в этом случае, если в меню есть прокрутка, то пункты меню при скролле уходят под него.