Slide-up sheet is a white area sliding up from bottom of the viewport. The purpose is to mimic the native mobile behaviour of the slide-up component.
When and how to use it
The component is used when you want the user to take action from a list of options (e.g. select bank account) or present a set of data, without requirement of further actions (e.g. further information or clarification).
The Slide-up sheet is based on the native component and aims to have similar behaviour and pattern. It can be triggered from different components like a default link, a button, selector etc. Slide-up sheet is only available on mobile devices regardless app or responsive framework. On desktop, the Slide-out modal is used instead of the Slide-up sheet.
The height of the slide-up sheet should be dynamic in that sense that it adjusts its height to the content. The max height of the component should be X% of the view port since the "Close"-icon can be easily mistaken by the “Close”-link in the native navigation bar. When the sheet is set to max-height, additional content should be scrollable. The title and "Close"-icon should be sticky when content scrolls beneath it.
The component is closed by performing the following:
- Tap "Cross"-icon in upper right corner
- Tap outside of component
- Select an actionable option (if that is the case of content)
- Vertical drag or flick-gesture on component area
Do's and don'ts
- Use when you want to present a list of actions where every single option requires extensive amount of data and headings/paragraphs
- Use when it is preferable for the user to stay in context
- Use defined components in the sheet, e.g. list with several columns and rows, heading, paragrap
- Make it full height to top of viewport
- Can be overkill to use if you have one word or short sentences as a selection option. Use instead native scroll wheel behaviour
- Avoid having more than two slide-up sheets active at the same time
Below: Calculating loss of capital