Masters and Layers
Master pages, also known as templates, and Layers are a great way to mix content from different pages, or to stack content on top of existing pages.
Master pages
Any page in FlairBuilder can be a master page (template) for another page. To set a master for the current page, simply open the Page Settings dialog and choose a page from the Master dropdown.
As noted in the previous section, you can also embed pages into a page. This makes it super easy to create portions of UI that automatically update whenever you change the source page.
Page layers
Page layers are great for prototyping interactions like popups, light box windows, rich tooltips. Even different page states.
You can create new page layers by clicking on the “Add new layer” button.
To edit the content of a layer, simply select it from the layers bar by clicking it. Layers will be stacked in the order you select them. If you click it again, it will be closed, leaving the rest of the layers opened. It’s easy to tell on which layer are you currently working and which other layers are opened.
Open layer action
To open a layer when the user performs an action (i.e. click on button), use the Interactions Panel to assign the Show Layer action to a specific event.
In the “Show layer” action configuration you have several options. First is to select the layer to open with this action. Secondly, the positioning of the layer, which can be relative to the component that triggers the action, or at an absolute position on the page. In both cases you will be able to visually position the layer’s content accordingly (see the blue area in the image).
Next, you can specify if the layer should be display in a modal fashion or not. And last, if you layer should be close when the user clicks outside the content of the layer.
However, if the action is triggered by a softer event, such as mouse hover, than the last two options will be replaced by “Close on mouse out”. This lets you mimic tooltips or mega drop-down menus.
Next: Components >
