Skip to main content

glint-divide

Creates a row of panels with a vertical dividing line between the panels. The dividing line can be dragged to resize the panels.

<glint-divide>
  <glint-divide-panel [initialRatio]="0.3" [minWidth]="250">
    Left panel
  </glint-divide-panel>
  <glint-divide-panel [initialRatio]="0.4">
    Center panel
  </glint-divide-panel>
  <glint-divide-panel [initialRatio]="0.3" [minWidth]="324">
    Right panel
  </glint-divide-panel>
</glint-divide>
  • [initialRatio] (required) How much space is allocated to this panel, relative to the other panels.
  • [minWidth]: If defined, the panel width cannot be decreased beyond this size.
  • content: Panel content