Modal pages

Pages that slides in from the bottom and covers the screen.

๐Ÿ‘‰ The Tag

This tag, placed on a top-level app page, creates a page that slides in from the bottom and covers the screen.

๐Ÿ“ Where to add the tag: A top-level app page

๐Ÿท๏ธ How to add the tag

  1. On a blank app page, create a Modal page design.

  2. Use the tag that you prefer the most for modal page.

Types of modal pages

Page modal 100%

This modal will always be 100% of the mobile screen and this is a fix modal. Use this tag:


Page modal % Size

Define the percentage number of the screen that your modal will shown up. Could be scrollable! Make it as long as you want. Several samples here:

Size 30% [page:modal:30%] 
Size 50% [page:modal:50%]
Size 70% [page:modal:70%]
Size 90% [page:modal:90%]

Page Modal Fixed Size

Add the following tag in case you want the modal to be fixed:

Page Fixed [page:modal:fixed]

iOs Cards Modal Type

This type of Modals are just working in iOs. This will be a 100% screen modal and scrollable! Add this tag:

iOs cards [page:modal][ios:cards]

๐Ÿ”ฅ Important: Noticed that for the experience you will close them with a swipe down.

Now you can do the prototyping! Import to Bravo & preview on Bravo Vision ๐Ÿš€

๐Ÿ’พ Example files

Duplicate the files below to see how to set it up!

Last updated