core/resizable-grid/resizable-grid.component.ts

Description

Resizable Grid Component

Provides a flexible layout with two adjustable panes separated by a draggable divider. Supports both a horizontal (left/right) and a vertical (top/bottom) split.

Basic Usage

Example :

<c8y-resizable-grid
  [leftColumnWidth]="'50%'"
  [collapseThreshold]="320"
  [collapsible]="true"
  [trackId]="'my-layout'">
  <div #colA>Left column content</div>
  <div #colB>Right column content</div>
</c8y-resizable-grid>

Vertical (top/bottom) split

Example :

<c8y-resizable-grid
  [orientation]="'vertical'"
  [leftColumnWidth]="'40%'">
  <div #colA>Top pane content</div>
  <div #colB>Bottom pane content</div>
</c8y-resizable-grid>

Implements

OnInit AfterViewInit OnChanges OnDestroy

Example

Metadata

changeDetection	`ChangeDetectionStrategy.Eager`
selector	`c8y-resizable-grid`
standalone	`true`
imports	`CommonModule` `C8yTranslatePipe`
templateUrl	`./resizable-grid.component.html`

Relationships

Used by

Depends on

CommonModule
C8yTranslatePipe
OnInit
AfterViewInit
OnChanges
OnDestroy

<div
  class="resizable-grid-container"
  [class.is-resizing]="isResizing"
  [class.resizable-grid-container--vertical]="isVertical"
>
  <div
    class="col-a"
    #colA
    [id]="colAId"
  >
    <!-- Content for the left/top pane goes here -->
    <ng-content select="[left-pane]"></ng-content>
  </div>
  <div
    class="resizer"
    [attr.aria-label]="'Resize columns' | translate"
    tabindex="0"
    aria-valuemin="0"
    aria-valuemax="100"
    [attr.aria-orientation]="isVertical ? 'horizontal' : 'vertical'"
    [attr.aria-controls]="colAId + ' ' + colBId"
    [attr.aria-valuenow]="colAWidthPercent"
    role="separator"
    (mousedown)="onMouseDown($event)"
    (keydown)="onKeyDown($event)"
  >
    <i class="dlt-c8y-icon-arrow-circle-divide-horizontal"></i>
  </div>
  <div
    class="col-b"
    #colB
    [id]="colBId"
  >
    <!-- Content for the right/bottom pane goes here -->
    <ng-content select="[right-pane]"></ng-content>
  </div>
</div>