Trays are used to display transient content (menus, options, additional actions, etc.) They only exist on mobile applications and are used for exposing types of content that may be too overwhelming for popovers.
In portrait orientation, a tray is displayed at the bottom of the screen and takes up the full-width.
In landscape orientation, a tray is displayed at the bottom of the screen, but keeps its portrait width. It is centered horizontally and has rounded upper corners.
A tray’s height is flexible: its height should accommodate for the amount of content inside.
The maximum height of a tray is determined by a 64 px safe zone from the top of the screen in both portrait and landscape orientations. This guarantees that there is always space for tapping outside the tray. It also helps to visually differentiate a tray and a new page.
A tray can contain menu items, as well as other types of components (e.g., list, thumbnail, etc.) to display additional options and information.
Trays have a top and bottom padding of 5 px in both portrait and landscape orientations. However, when there is a fixed header, the top padding starts below the fixed header.
When navigating to nested content within a tray, the entire tray content is replaced by the nested content sliding in from the right side of the screen. Remember to include a header with a back arrow to allow users to navigate back.
When displaying a tray, it should fade in and animate up from the bottom of the screen. The background overlay fades in at the same time.
A tray can be dismissed by clicking/tapping anywhere outside of the tray, swiping down on the screen, or selecting an option/taking an action inside the tray. On Android, it can also be dismissed with the back button. When the tray content is scrollable, a swipe-down gesture should only dismiss the tray if the content in scrolled to the top.
|Apr 21, 2020||5.0.1|
|Apr 20, 2019||5.0.0|