Scroller
The Scroller element enables vertical or horizontal scrollable regions within a screen. Use this container to display long content that exceeds the visible viewport. This element supports child components and ensures layout flexibility without requiring paging or multiple screens.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Scroller | UI component type |
| Group | Scroller | Belongs to the scrollable container group |
| Identifier | 42 | Unique element ID |
| Preview | ✓ | Displays preview image |
| Children | Y | Accepts nested content |
| Value | Not a value-based element | |
| Mandatory | Optional element | |
| Error | No validation logic | |
| Min | Not applicable | |
| Max | Not applicable | |
| Read-only | Always non-interactive | |
| List | Not a list-based container | |
| Text, Icon | Does not include text or icons | |
| Event | Does not trigger events directly | |
| Shade | Does not include shaded background |
Usage Example
<Scroller>
<Section title="Visit Summary" />
<Group>
<Edit label="Diagnosis and treatment" />
<Link label="Edit" />
</Group>
</Scroller>
SDK Integration
The Visit Took Place wizard uses this element to contain multiple editable sections within a scrollable frame.
Method: /account/reset-password
This route completes the post-visit flow. The scroller groups the full summary, charges, and document blocks into one navigable view.
Example UI Placement
| Level | ID | Type | Description |
|---|---|---|---|
1 | summary-scroll | Scroller | Wraps the full visit summary UI |
Notes
- Use when content height exceeds the screen size.
- Avoid placing form submit buttons inside the scroll area unless pinned.
- Supports vertical and horizontal scrolling, depending on layout.