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:
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 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.
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.
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.
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.
Permissions
Ringtone selection window
Most windows don't need headers.
They summarize a decision in a sentence or two by either:
Discard draft ?
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:
Let Google help apps determine location. This means sending anonymous location data to Google, event when no apps are running.
Windows can be modal by setting the modal property.
Modal windows disable background intereaction whilte opened.
Discard draft ?
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 Windows can be resized from any direction. By default resizeMode property is not set.
Several modes are available:
Some dialog content requires scrolling, such as lists of ringtones.
Dialogs are separate from the underlying parent material and do not scroll with it.
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.
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.
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.