Split Panel

Design Code

Simple Example

Start
End 
<nile-split-panel>
  <div
    slot="start"
    style="height: 200px; background: black; display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    Start
  </div>
  <div
    slot="end"
    style="height: 200px; background: background: red; display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    End
  </div>
</nile-split-panel>

Attributes & Properties

Name Description Reflects Type Default
position The current position of the divider from the primary panel’s edge as a percentage 0–100. Defaults to 50% of the container’s initial size. number 50
positionInPixels The current position of the divider from the primary panel’s edge in pixels. number -
vertical Draws the split panel in a vertical orientation with the start and end panels stacked. boolean false
disabled Disables resizing. Note that the position may still change as a result of resizing the host element. boolean false
primary If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the host element is resized. 'start' | 'end' | undefined -
snap One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g. "100px 50%". string | undefined -
snapThreshold How close the divider must be to a snap point until snapping occurs. number 12
updateComplete A read-only promise that resolves when the component has finished updating. -

Events

Name Description Event Detail
nile-reposition Emitted when the divider’s position changes. -

Slots

Name Description
start Content to place in the start panel.
end Content to place in the end panel.
divider The divider. Useful for slotting in a custom icon that renders as a handle.

Custom Properties

Name Description Default
--divider-width The width of the visible divider. 4px
--divider-hit-area The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. 12px
--min The minimum allowed size of the primary panel. 0
--max

Parts

Name Description
start The start panel.
end The end panel.
panel Targets both the start and end panels.
divider The divider that separates the start and end panels.