Context sheet
v4.0
A context sheet is an elevated, medium-attention surface. It can be modal or non-modal.
A context sheet is an elevated, medium-attention surface. It can be modal or non-modal.
Context sheets inherit common properties and behaviors from the primitive sheet component.
Context sheets appear from the bottom on small screens and the trailing edge of larger screens.
A contextual sheet can be modal or non-modal.
Modal sheets use a scrim to block interaction with the main page.
Non-modal sheets allow simultaneous interaction with the sheet and main page surfaces. Non-modal sheets are best used for experiences that require a persistent but dismissible sheet that benefits from interacting with the main page, like viewing location details on a map.
To maintain ergonomics and readability on smaller screens, context sheets have a minimum height of 200px. Content that doesn’t fill the space of a minimum sheet will have white space below the content area.
Navigating within a context sheet should be avoided where possible. If navigating is necessary, keep it shallow – no more than 1 level deep.
When presenting a secondary view in a context sheet, the primary view content is replaced. The secondary view is dismissed by making a selection or pressing a backward navigation button.
Context sheets are dismissed by:
iOS keyboard
Android keyboard
On small screens, the vertical height of a context sheet defaults up to 50% of the screen height. Scrolling the sheet first slides it to full height before the content area scrolls.
On larger screens, context sheets are fixed to the trailing edge of the screen. Content that extends beyond the vertical bounds of the sheet scrolls. The context sheet header and footer are pinned above the scrolled content.
Do keep interactions within context sheets on the sheet surface. Use inline progressive disclosure to reveal additional or optional content.
Don’t launch other context sheets over a context sheet.
Do keep navigation to a minimum within context sheets. Keep the navigation stack shallow when necessary, no more than 1 level.
Don’t nest deep navigation stacks within sheets. The original context gets lost and closing the sheet can have unexpected results.
