Windows inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Windows contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use windows sparingly because they are interruptive.

Some windows types include:

  • Alerts are urgent interruptions that inform about a situation and require acknowledgement.
  • Progress windows inform about a specific task completion.
  • Dialogs require users to explicitly confirm a choice.

Behavior

Windows should never be obscured, either by other elements or the screen edge. Dialogs are dismissed when a required action has been taken.

Full-screen dialogs

Full-screen dialogs are best suited to complex tasks, or require an input method editor, as they group a series of tasks together before they can be saved.

Appearance

Windows consist of three main sections: Header, Content and Footer.

Window sections

Header section is optional. It can contain an arbitrary text or other Custom Elements.

By default, the header section contains the lable of the Window. The label can be changed by setting the label property.

The content of the Header section can be completely replaced using an HTMLTemplate. In order to do that the user has to apply the id of an HTML Template to the headerTempalte property.

No Content Added

Window with a material icon inside the Header

Content section holds the main information presented to the user. It can contain any HTML.

When the window is collapsed the content is hidden. The only visible section if the Header.

Item 1 Item 2 Item 3 Item 4

Window with a ListBox inside.

Footer section is optional. It can contain an arbitrary text or other Custom Elements.

Usualy used to hold the Dialog interaction controls.

Danish scrollable list item Eggs scrollable list item

Permissions

None Callisto Dione Ganymede Hangouts Call Luna Oberon Phobos Natural Onward Organic Orion Pegasus Titania Pyxis Luna

Ringtone selection window

Themes


Windows without header bars

Most windows don't need headers.

They summarize a decision in a sentence or two by either:

  • Asking a question (e.g. "Delete this conversation?")
  • Making a statement related to the action buttons

Discard draft ?

Windows width header bars

Use header bar windows only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the header and button text alone.

If a header is required:

  • Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?"
  • Avoid apologies, ambiguity, or questions, such as “Warning!” or “Are you sure?”

Let Google help apps determine location. This means sending anonymous location data to Google, event when no apps are running.

Behavior

Modal

Windows can be modal by setting the modal property.

Modal windows disable background intereaction whilte opened.

Discard draft ?

Pinned

Pinned Windows can't be dragged. They are used for alerts or dialogs. By default pinned property is not applied. The Header section of the element is the window's draggable area.

What's your favourite animal ?

Resizable

Resizable Windows can be resized from any direction. By default resizeMode property is not set.

Several modes are available:

  • none
  • horizontal
  • vertical
  • both

Scrollable content exception

Some dialog content requires scrolling, such as lists of ringtones.

  • For scrollable lists of options, the dialog title remains pinned to the top. This ensures that a selected item remains visible with the title, regardless of the item’s position in the list.
  • Otherwise, the title scrolls off with the content. Actions always remain in place when content scrolls.

Dialogs are separate from the underlying parent material and do not scroll with it.

Displaying additional content

To disclose additional content in a dialog, do so using inline expansion within the content area. Or consider alternative components that are optimized for large amounts of content.

Dismissing dialogs

Dialogs may be dismissed either by tapping outside of the dialog, or tapping the system back button (on Android). Alternatively, the user’s ability to dismiss a dialog may be disabled, so that one of the actions must be chosen before proceeding.

Header Controls

The header section of the Window element contains the control buttons used to do operations like maximizing, minimizing, closing, collapsing and etc.

Those operations can be executed programatically as well by calling the appropriate method.

Open
Open