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
On a blank app page, create a Modal page design.
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]
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]
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
Was this helpful?