Split Panel

<gstock-split-panel> | GstockSplitPanel

API

Propiedades

Nombre Descripción Reflects Tipo Por defecto
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. Reflects number 50
positionInPixels
position-in-pixels 		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. Reflects boolean false
disabled Disables resizing. Note that the position may still change as a result of resizing the host element. Reflects 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
snap-threshold 		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.

Aprende más sobre atributos y propiedades .

Eventos

Nombre React Event Descripción Event Detail
gstock-reposition-event onGstockRepositionEvent Emitted when the divider’s position changes. -

Aprende más sobre eventos .

Slots

Nombre Descripción
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.

Aprende más sobre slots .

Propiedades personalizadas

Nombre Descripción 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 The maximum allowed size of the primary panel. 100%

Aprende más sobre propiedades personalizadas .

Partes

Nombre Descripción
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.

Aprende más sobre partes CSS .