Splitter panel

Renders a splitter panel inside a splitter element.

Node name : splitter-panel

Attributes

Attribute	Type	Required	Default value	Description
size	string	false		Initial size in percent. A panel without size shares the space left by the other panels. Cannot be used together with size-model.
size-model	string	false		Two-way bound size in percent. Use this when the resized value must be written back automatically.
min-size	string	false	0	Minimum size in percent
max-size	string	false	100	Maximal size in percent

Examples

Basic usage

Trivial code sample where the parent takes 2/3 of the containers width:

<vertical-layout>
  <toolbar />
  <splitter>
    <splitter-panel size="67" min-size="40" max-size="80">
      <datagrid />
      <pagination-bar />
    </splitter-panel>
    <splitter-panel>
      <textbox property-name="description" />
    </splitter-panel>
  </splitter>
</vertical-layout>

Parent vs. detail proportions usage

Code sample where the size is set on the detail and the parent adapts to its child:

<vertical-layout>
  <toolbar />
  <splitter>
    <splitter-panel size="@Computeds.MainPanelSize">
      <datagrid />
    </splitter-panel>
    <splitter-panel size="@Fields.DetailPanelSize">
      <textbox property-name="description" />
    </splitter-panel>
  </splitter>
</vertical-layout>

The main panel subtracts the size of the detail panel from its initial 100% size:

- Name: MainPanelSize
  DotNetDataType: int
  Getter: return 100 - Fields.DetailPanelSize;

Two-way binding the panel size

Use size-model when the panel size should stay synchronized with a field or computed. This is the preferred way to persist layout state.

<splitter>
  <splitter-panel size="@Computeds.MainPanelSize">
    <datagrid />
  </splitter-panel>
  <splitter-panel size-model="@Computeds.DetailPanelSize">
    <textbox property-name="Description" />
  </splitter-panel>
</splitter>

The getter and setter of DetailPanelSize are responsible for reading and writing the value (for example through local storage or another persisted UI state mechanism).

Warning

When one panel size is derived from the other, persist only one source of truth. For example, if MainPanelSize is computed from DetailPanelSize, use size-model only for DetailPanelSize and keep MainPanelSize computed. Persisting both can introduce conflicting or redundant state because resizing one panel implicitly changes the other.

Remarks

size-model is updated each time the size of the panel changes: when a drag of a bar ends (not continuously during the drag), when a bar is moved with the keyboard or double-clicked, and when the panel is resized because the size of another panel changed or a panel was shown or hidden. A panel keeps its size, in proportion, when another panel is shown or hidden.

The standard splitter template components do not currently expose a continuous resize callback.

layout:visible hides the panel together with the bar before it, and the other panels take its space. The hidden panel keeps its size, so that it is shown again with the same size. The event:resize, layout:rendered-size and layout:lazy-visible directives have no effect on a splitter panel: set them on an element inside the panel instead.

Warning

Only the splitter panels at the end of a splitter can be shown or hidden. A panel shown by a condition before panels already displayed, first or between two of them, makes the bars resize the wrong panels. A first or middle panel hidden with layout:visible keeps its place in the splitter: the remaining bars still resize it.

layout:visible is reliable on the last panel of a splitter with two panels, for example an optional side panel. With more panels, the hidden panel still counts in the sizes of the others: the remaining bars move faster than the pointer while they are dragged.