core/common/empty-state/empty-state.component.ts
A component to show generic empty state. Title and subtitle should be used with translate pipe to mark strings for translation. Component can be displayed vertically (default) or horizontally. Additional markup elements can be placed inside the tag.
Example :<c8y-ui-empty-state
[icon]="'c8y-icon'"
[title]="'Place your title here' | translate"
[subtitle]="'Place your subtitle here' | translate"
[horizontal]="true"
>
(...)
</c8y-ui-empty-state>| selector | c8y-ui-empty-state |
| standalone | true |
| imports |
NgIf
NgClass
IconDirective
NgTemplateOutlet
C8yTranslatePipe
|
| templateUrl | ./empty-state.component.html |
Inputs |
| horizontal |
Type : boolean
|
|
Whether to display it in horizontal layout. |
| icon |
Type : string
|
|
Icon name. |
| subtitle |
Type : string
|
|
Optional subtitle. |
| title |
Type : string
|
|
Required title. |
<div class="c8y-empty-state" [ngClass]="{ 'c8y-empty-state--horizontal': horizontal }">
<i [c8yIcon]="icon" class="c8y-icon-duocolor"></i>
<ng-container *ngIf="!horizontal">
<div>
<h3 class="text-medium">{{ title | translate }}</h3>
<p class="p-b-16" *ngIf="subtitle">{{ subtitle | translate }}</p>
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="horizontal">
<div class="d-flex d-col j-c-center">
<p class="text-medium a-s-start">{{ title | translate }}</p>
<p *ngIf="subtitle" class="small a-s-start">{{ subtitle | translate }}</p>
<div class="small a-s-start">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</div>
</ng-container>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
</div>