Splitting a Screen
Overview
To divide a screen into multiple sections:
- either, from the palette select a layout that is already divided by a horizontal or vertical split; see Divide a Screen Using a Palette Layout, below.
- or in an area right-click to show the popup menu and select on of the Add Area... options; see Divide a Screen Using "Add Area" Options, below.
Divide a Screen Using a Palette Layout
Some palettes have layouts that have 2 areas contained by a split-view area. For example:
- Serene Grey - Basic Components → Area Split
These can be used to divide your screen into separate areas while also providing a splitter which allows designers and users to resize the areas.
Setup
- In the screen canvas toolbar, click Palette.
- Expand a palette to find a layout that has 2 areas.
- Drag the layout from the palette onto an existing area.
- PhixFlow creates a layout with the following structure, this example is horizontal but vertical options are also available.Â
- If you have existing content on your screen this can be dragged into the appropriate area using the repository or layout section. Remember you will need to hold the shift key to drop content inside these areas.
Divide a Screen Using the "Add Area" Options
- Right-click a screen.
- Click Screen Options.
- Use one of the Add Area... options to add a new area for the screen, separated by a dividing line.
PhixFlow creates a new element in the form of a pane for this part of the screen. - This new element is similar to a black screen and will require a suitable container, such as an area, form or card container in order for you to display content.Â
It may be easier to add one of the complete screens to the new element and remove the items you do not require.
Resizing
To resize a pane, drag its dividing line. This automatically resizes adjacent panes.
To prevent resizing, right-click to display the popup menu and select:
- Lock Width
- Lock Height
Removing a Pane
First, delete any layouts or components in it.
- Right-click on the empty pane to display the popup menu.
- Select  Delete Pane.Â