Bottom Sheet

A Bottom Sheet is an alternative to a menu or a dialog. It opens from bottom to top and can be dismissed by swiping it from top to bottom. When it opens, it prevents the user from interacting with the rest of the app.

You can use the bottom sheet when you want to perform a small action without creating a separate screen.

Adding bottom sheet

Adding the bottom sheet comprises the following steps:

Creating a component

Bottom Sheets are created using a component. See how to create it from scratch or use the templates.

You can customize the size of your Bottom Sheet canvas by resizing the Handle Bars.

Opening bottom sheet

You can open the bottom sheet by adding the action. See how to do it on the following page:

Bottom Sheet

Return a value from bottom sheet

Sometimes you might want to return a value from a bottom sheet to the page that opened itβ€”for example, passing the selected item from the bottom sheet to the page and displaying it.

Something like this:

You can do so by passing the value while you add the dismiss action.

Adding transparent background

To make a bottom sheet with a transparent background:

  1. Select "Background Color" and make sure the opacity is set to 0% - this will give you "transparent" instead of "unset.

  2. Set the barrier color to whatever you want, and your bottom sheet will have no set background color.

Want to see some bottom sheet examples?

Check out our HealthAI and RobinDo sample apps.

Last updated