Split Panel

<gstock-split-panel> | GstockSplitPanel

Examples

Initial Position

To set the initial position, use the position attribute. If no position is provided, it will default to 50% of the available space.

Start
End 
<gstock-split-panel position="75">
  <div
    slot="start"
    style="height: 200px; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    Start
  </div>
  <div
    slot="end"
    style="height: 200px; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    End
  </div>
</gstock-split-panel>

Initial Position in Pixels

To set the initial position in pixels instead of a percentage, use the position-in-pixels attribute.

Start
End 
<gstock-split-panel position-in-pixels="150">
  <div
    slot="start"
    style="height: 200px; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    Start
  </div>
  <div
    slot="end"
    style="height: 200px; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    End
  </div>
</gstock-split-panel>

Vertical

Add the vertical attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation.

Start
End 
<gstock-split-panel vertical style="height: 400px;">
  <div
    slot="start"
    style="height: 100%; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    Start
  </div>
  <div
    slot="end"
    style="height: 100%; background: var(--gstock-legacy-color-grayscale-0); display: flex; align-items: center; justify-content: center; overflow: hidden;"
  >
    End
  </div>
</gstock-split-panel>