File

core/common/empty-state/empty-state.component.ts

Description

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>

Metadata

Index

Inputs

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 p-b-4">{{ title | translate }}</h3>
      <p *ngIf="subtitle">{{ subtitle | translate }}</p>
      <div class="p-t-16">
        <ng-container *ngTemplateOutlet="content"></ng-container>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="horizontal">
    <div>
      <p>
        <strong>{{ title | translate }}</strong>
      </p>
      <p *ngIf="subtitle" class="small">{{ subtitle | translate }}</p>
      <div class="small m-t-8">
        <ng-container *ngTemplateOutlet="content"></ng-container>
      </div>
    </div>
  </ng-container>

  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
</div>

results matching ""

    No results matching ""