Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Dividing/Splitting a Screen

You can divide a screen into multiple sections using one of the following techniques:

  1. 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.
  2. Use right-click pop-up menu options Add Area...; see Divide a Screen Using "Add Area" Options, below.

Anchor
palette
palette

1. 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

  1. In the screen canvas toolbar, click
    Insert excerpt
    _palette
    _palette
    nopaneltrue
    .
  2. Expand a palette to find a layout that has 2 areas.
  3. Drag the layout from the palette onto an existing area.
  4. PhixFlow creates a layout with the following structure, this example is horizontal but vertical options are also available. 
  5. 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.


2. Divide a Screen Using "Add Area" Options
Anchor
element
element

  1. Right-click a screen.
  2. Click Dashboard Options.
  3. 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.
  4. 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. 
    1. 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 pop-up menu and select:

  • Insert excerpt
    _area_lock_width
    _area_lock_width
    nopaneltrue
  • Insert excerpt
    _area_lock_height
    _area_lock_height
    nopaneltrue

Removing a Pane

First delete any layouts or components in it.

  1. Right-click on the empty pane to display the pop-up menu.
  2. Select 
    Insert excerpt
    _delete_item
    _delete_item
    nopaneltrue
     Pane
    Anchor
    add-area
    add-area

More Information