Dividing/Splitting a Screen
You can divide a screen into multiple sections using one of the following techniques:
- Use Palette layouts that have multiple areas; see Divide a Screen Using a Palette Layout, below.
This design pattern has two areas with a splitter. - Use right-click pop-up menu options Add Area...; 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:
- Theme 2.1 - Basic Components → Area Split
These can be used to divide you 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:
Divide a Screen Using "Add Area" Options
- Right-click a screen
- Click Dashboard Options
- Use one of the Add Area... options to add a new area for the screen, separated with a dividing line.
PhixFlow creates a new element in the form of a pane for this part of the screen. - Add a suitable container, such as an area, form or card container.
Resizing
To resize a pane, drag its dividing line. This automatically resizes adjacent panes.
To prevent resizing, right-click to display the pop-up 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 pop-up menu.
- Select Delete Pane.