core/resizable-grid/resizable-grid.component.ts
Resizable Grid Component
Provides a flexible layout with two adjustable columns separated by a draggable divider.
<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>
OnInit
AfterViewInit
OnChanges
OnDestroy
| selector | c8y-resizable-grid |
| standalone | true |
| imports |
C8yTranslatePipe
|
| templateUrl | ./resizable-grid.component.html |
CommonModule
C8yTranslatePipe
OnInit
AfterViewInit
OnChanges
OnDestroy
<div class="resizable-grid-container" [class.is-resizing]="isResizing">
<div #colA class="col-a" [id]="colAId">
<!-- Content for the left column goes here -->
<ng-content select="[left-pane]"></ng-content>
</div>
<div
class="resizer"
(mousedown)="onMouseDown($event)"
(keydown)="onKeyDown($event)"
tabindex="0"
role="separator"
aria-orientation="vertical"
[attr.aria-controls]="colAId + ' ' + colBId"
[attr.aria-label]="'Resize columns' | translate"
[attr.aria-valuenow]="colAWidthPercent"
aria-valuemin="0"
aria-valuemax="100"
>
<i class="dlt-c8y-icon-arrow-circle-divide-horizontal"></i>
</div>
<div #colB class="col-b" [id]="colBId">
<!-- Content for the right column goes here -->
<ng-content select="[right-pane]"></ng-content>
</div>
</div>