Flow component » Overlays

Overlays

Not every screen should slide in from the right. That’s why we also have ‘overlays,’ five more ways to transition to another screen.

The overlays come with a lightbox effect: a transparent gray background that darkens the screen.

Which also means you don’t have to transition to a full-size ‘screen.’ You can, for instance, slide in a menu from the left, or pop up an alert in the middle of the screen.

Tapping the gray background will dismiss the overlay.

Here are the five possible animations. You can slide in from any of the four screen edges, or have the overlay pop up in the center of the screen:

Overlay flows
`showOverlayLeft()`	Slide over from the top left, like the menu behind a hamburger button.
`showOverlayRight()`	Slide over from the top right, like the menu behind the second hamburger button. ?
`showOverlayTop()`	Slide down from the top center, like a notification.
`showOverlayBottom()`	Slide up from the bottom center, like a (modal) edit screen or action sheet on iOS.
`showOverlayCenter()`	Pop up in the center, like an alert.

In the following prototype, you always transition to the same artboard (named Overlay) with the five different flows.

button_overlay_top.onTap ->
    flow.showOverlayTop Overlay
button_overlay_left.onTap ->
    flow.showOverlayLeft Overlay
…

Returning to the previous screen (i.e., removing the overlay), happens with the same showPrevious().

Overlay.onTap ->
    flow.showPrevious()

But, as you know, tapping the gray background will also trigger a showPrevious().

Headers and footers are ignored

True to its name, an overlay will appear on top of the existing screen. Everything on your screen, including headers and footers you might have set, will be darkened by the gray background.

Make it scroll

Unlike showNext(), an overlay won’t automatically make the screen scrollable.

But the same scroll argument that we used to disable scrolling on a showNext() can here be used to enable it:

button_top_scrollable.onTap ->
    flow.showOverlayTop screenB,
        scroll: yes

With and without scroll for all five overlays

Or, when you want more control, you can completely prepare a screen before showing it, like in this example that shows three pages inside a PageComponent.

# A PageComponent with 3 pages
pageScroller = new PageComponent
    size: First_page.size
    scrollVertical: no
    shadowColor: "#333"
    shadowBlur: 50
    borderRadius:
        bottomLeft: 14
        bottomRight: 14
pageScroller.addPage First_page
pageScroller.addPage Second_page
pageScroller.addPage Third_page

Button.onTap ->
    flow.showOverlayTop pageScroller

The overlayed screen is a PageComponent with three pages

By default, you can tap the gray background to dismiss the overlay (the last example doesn’t even have a showPrevious()), but you can make an overlay modal so that you have to close it explicitly.

When doing this, you’ll want to ensure that the user can return by providing a close button with a showPrevious().

In this example, you have to tap on the ‘Cancel’ button to dismiss the overlay.

# Show the Action Sheet on tap
Artboard.onTap ->
    # “modal” makes the background ignore taps
    flow.showOverlayBottom action_sheet,
        modal: yes

# Cancel action
cancel_button.onTap flow.showPrevious

Changing the transparent background

The gray background, overlay, is a child layer of the FlowComponent. It’s always there (check your Layer Panel); it’s just kept invisible until needed.

It’s a common layer, so you can change its properties, including its backgroundColor.

button_red.onTap ->
    flow.overlay.backgroundColor = "red"
    flow.showOverlayCenter Overlay

The default (black) background color, and four other options

But whichever color you pick, it will always be made 50% transparent. To change the background’s opacity, you’ll have to create a custom transition.

Without animation

Just as with a showNext() you can show an overlay without animation.

flow.showOverlayCenter Overlay,
    animate: no

Overlays

Headers and footers are ignored

Make it scroll

Make it modal

Changing the transparent background

Without animation