libs/upp-wdgt/src/components/upp-grid/upp-grid.ts
Represents a grid component that dynamically handles items and configuration.
Supports two view modes ('GRID' and 'LIST') and scaling via a thumsize value.
OnInit
AfterContentInit
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | upp-grid |
| styleUrls | ./upp-grid.scss |
| templateUrl | ./upp-grid.html |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
constructor(config: configService, change: ChangeDetectorRef)
|
|||||||||
|
Parameters :
|
| name |
Type : string | null
|
Default value : null
|
|
The name of the grid configuration. This input is required to load configuration settings. |
| size |
Type : "SMALL" | "LARGE"
|
Default value : 'SMALL'
|
|
The desired card size SMALL for square cards and LARGE for rectangular cards |
| class |
Type : string
|
|
Dynamically calculates the CSS classes for the grid based on the |
| ngAfterContentInit |
ngAfterContentInit()
|
|
Lifecycle hook that updates child items after content initialization.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Lifecycle hook that cleans up resources when the component is destroyed.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Lifecycle hook that initializes the grid configuration and subscribes to updates.
Returns :
void
|
| items |
Type : QueryList<ViewModeDirective>
|
Decorators :
@ContentChildren(ViewModeDirective, {descendants: true})
|
| ViewMode |
getViewMode()
|
|
Gets the current view mode of the grid. |
| ScaleMode |
getScaleMode()
|
|
Computes the scaling factor based on the |
| IsEmpty |
getIsEmpty()
|
|
Checks if the grid is empty (i.e., no child items are present). |
| gridClasses |
getgridClasses()
|
|
Dynamically calculates the CSS classes for the grid based on the
Returns :
string
|
<div style="margin: 5px 3px">
<div *ngIf="IsEmpty === true">
<ng-content select="upp-grid-empty"></ng-content>
</div>
<div *ngIf="IsEmpty !== true">
<div [ngClass]="{ 'thumbnail-grid': ViewMode === 'GRID', 'thumbnail-list': ViewMode === 'LIST' }" [style.transform]="'scale(' + ScaleMode + ')'">
<ng-content></ng-content>
</div>
</div>
</div>
./upp-grid.scss
:host {
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 8px;
}
&.--small {
.thumbnail-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}
}
&.--large {
.thumbnail-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
}
.thumbnail-list {
display: flex;
flex-direction: column;
gap: 4px;
transform: none !important;
}
.thumbnail-item {
height: 11em;
}
.thumbnail-item * {
width: 100%;
}
}