Splitter
Splitter elements divide the screen layout into visual columns or panels. They organize nested child elements into left and right sections and are typically used to display appointment metadata and contextual actions side-by-side. The Splitter always contains two children.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Splitter | UI layout divider |
| Group | Box | Belongs to the "Box" group in UI catalog |
| Identifier | 47 | Unique element ID |
| Preview | ✓ | See image preview above |
| Read-only | Y | Static layout; does not accept input |
| Children | 2 | Accepts exactly two child containers |
| Event | Y | Supports layout update events |
| Value | Not a value-based element | |
| Mandatory | Optional layout element | |
| Error | Not applicable | |
| Min | No minimum constraint | |
| Max | No maximum constraint | |
| List | Not a list container | |
| Text, Icon | Does not include label or icon support | |
| Shade | No background shade applied |
Usage Example
<Splitter>
<Scroller>
<Title text="Patient Info" />
<Spacer />
<Green text="Scheduled appointment" />
</Scroller>
<Group>
<Section title="Details" />
<Tabs />
</Group>
</Splitter>
SDK Integration
The Appointment Details screen uses this layout on desktop to separate appointment metadata and action areas. This structure links to the SDK method:
Method: /profile/appointments/{id}/details
The Splitter controls layout only. It does not affect business logic.
Example UI Placement
| Level | Reference | Type | Description |
|---|---|---|---|
D-1 | — | Splitter | Root divider between scroll and group |
D-2 | — | Scroller | Main scroll panel |
D-2 | — | Group | Contextual block (desktop-only) |
Notes
- Used only in desktop flows; mobile layouts omit this element.
- Both children should support dynamic height within constraints.
- Typically contains a
ScrollerandGroupcombination.