Split Panel
<gstock-split-panel>
|
GstockSplitPanel
API
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
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. |
|
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
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. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-reposition-event
|
onGstockRepositionEvent
|
Emitted when the divider’s position changes. | - |
Learn more about events .
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. |
Learn more about slots .
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
|
The maximum allowed size of the primary panel. | 100% |
Learn more about custom properties .
CSS 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. |
Learn more about CSS parts .