Splitter

Provides a draggable divider for resizing and collapsing adjacent panels within a Grooper web page.

Remarks

The Splitter control enables users to adjust the size of two adjacent panels by dragging a divider. It is commonly used in Grooper web pages to create flexible layouts where users can resize sections to suit their workflow. The control supports both vertical and horizontal orientations, adapting to the layout of its container.

Interactive Components

• Draggable Divider:
  The divider can be dragged using the mouse or touch gestures to resize the panels. The position is constrained between 10% and 90% of the container's size for usability.

• Collapsible Panels:
  If enabled, either panel can be collapsed or expanded by clicking the handle on the divider. The handle displays an arrow icon indicating the current state. Collapsing a panel hides its content, allowing the other panel to use the full space.

• Keyboard Support:
  Users can adjust the divider position using arrow keys:

  • ArrowLeft / ArrowRight for vertical splitters
  • ArrowUp / ArrowDown for horizontal splitters
  • Control + Arrow to collapse or expand panels (when supported)

• Touch Support:
  The control supports touch gestures for resizing on mobile devices.

Usage

The Splitter is placed between two panels in a container. Users can:

• Drag the divider to resize panels.
• Click the handle to collapse or expand a panel (if enabled).
• Use keyboard shortcuts for accessibility.

Divider position and panel state are persisted per user and layout, so preferences are retained across sessions.