Splitter panel

Renders a splitter panel inside a splitter element.

Node name : splitter-panel

Attributes

Attribute	Type	Required	Default value	Description
size	`string`	`false`	`0`	Initial size in percent. 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 after the resize operation has completed, not continuously during drag.

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

Table of Contents