Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Patterns are methods of interaction with your app. Unlike the building blocks, which describe particular user interface elements, patterns are ways those building blocks are presented.
Drawers provide access to top-level navigation links that are usually user-configurable. For example, these are used for accessing accounts in the Email and Calendar apps, and for the list of open tabs in the Browser app.
Drawers can also be used to provide access to secondary or "power-user" features.
Drawers should be positioned on the left side of the screen.
To open a drawer, the user taps the standard "drawer" button. The drawer then slides in from the left side of the display, pushing aside the content below.
The drawer is closed when the user either taps the "drawer" button again, or anywhere on the visible area of the underlying primary interface. The drawer then slides off the screen to the left, pulling the primary content back into its usual position behind it.
Drawers are usually depicted as being one layer behind the primary interface.
Drawers are of variable width; however, enough room must be left for the drawer button on the primary interface to remain fully visible.
The user should be given the impression that they're on the same page as whatever user interface element that caused the entry sheet to open; the entry sheet should be perceived as a temporary modal overlay. The user hasn't navigated deeper into a hierarchy of interface pages. To reinforce this impression:
Valid animations when opening an entry sheet include things like sliding in from the top or bottom, a cross-fade, scaling in, and the like.
"Cancel" buttons should be used instead of "Back" buttons.
Every element in the entry sheet must be related to adjusting a single setting, and there should not be links to other pages, lists, or dialog boxes.
The user will typically have two options to close an entry sheet: a Cancel button, and a button that accepts the user's data (this may be labeled "Done", "Send", "Join", or the like—it should be a verb describing what action will occur when the sheet is closed).
It's important to note that this is a mode, not a context switch. Animation and visual design should give the user the impression that they're in a temporary mode within the original view, not in a new view.
Multi-select mode may also be known as "edit mode" or "select mode" depending on the use case.
The header text should indicate the action the user is preparing to take, such as "Select photos" or "Select messages." When an item is selected, the header should be changed to indicate how many messages have been selected.
The view should exit multi select mode when the user either selects a button that performs an action (such as a "Delete" button) or taps a cancel button.
If the user has taken action (such as deleting three message threads), a status bar should appear to confirm the action.
