@cas-smartdesign/splitter

A draggable splitter layout for displaying 2 panels side by side.

An initial ratio can be configured but the user is able to move the splitter and therefore resize the panels.

The splitter takes the min-width and max-width CSS styles on the slotted elements into account but might not be able to uphold all size restrictions at the same time.

Slots

• left
  • The left panel.
  • Supports at most one assigned element.
• right
  • The right panel.
  • Supports at most one assigned element.
• splitter
  • Can be used to assigned a custom splitter element.
  • Supports at most one assigned element.
  • The assigned splitter element should have a fixed width.
  • The assigned splitter element can contain an element with the class sd-splitter-drag-area. This element is then used for dragging the splitter. If there is no such element, then the entire splitter element serves as the drag area.

Attributes

• ratio [number, number] (default=[1, 1])
  • A tuple of 2 numbers defining the width ratio of the 2 panels. This attribute is kept in sync with the actual ratio by the component implementation.
• hovering boolean (default=false)
  • Read-only attribute to indicate when the cursor is hovering over the splitter's drag area.
  • Useful for styling custom splitters.
• dragging boolean (default=false)
  • Read-only attribute to indicate when the splitter is being dragged.
  • Useful for styling custom splitters.

Properties

• ratio
  • Reflects the corresponding attribute.

CSS Custom Properties

The following custom properties are always considered:

• --sd-splitter-gap
  • Additional gap separating the splitter from the left and right panels (default: 0px).
• --sd-splitter-cursor
  • The cursor to display when the user interacts with the splitter (default: ew-resize).

The following custom properties only affect the default splitter (i.e., when the splitter slot is not assigned):

• --sd-splitter-width
  • The visible width of the splitter between the 2 panels (default: 0px).
• --sd-splitter-color
  • The splitter color in case its width is set to a non-zero value (default: transparent).
• --sd-splitter-handle-width
  • The width of the handle which the user has to drag for moving the splitter (default: 5px).
• --sd-splitter-handle-color
  • The color of the handle when the user interacts with it, i.e., during hover and drag (default: #1467ba).

Custom events

• sd-splitter-resized
  • Fired when the ratio is changed / updated. This is generally the case when
    1. The component is rendered for the 1st time.
    2. The size of the overall splitter layout changes.
    3. The user drags the splitter.