@terminus/ui-empty-state NPM

A component to display a responsive, empty state with optional information and action items.

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-empty-state

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Title

Title text will be output into an <h2> element:

<ts-empty-state title="No ad impressions, yet."></ts-empty-state>

Description

Any descriptive content can be passed in as the component content:

<ts-empty-state>
  <p>
    There aren't any Ad Impressions within the selected reporting period and filters yet.
    Please try again later or create a new <ts-link destination="#">Ad Tactic</ts-link>.
  </p>
</ts-empty-state>

Actions

Any calls to action can be placed inside the actions component:

<ts-empty-state>
  <ts-empty-state-actions>
    <ts-button theme="secondary">Button one</ts-button>
    <ts-button>Button two</ts-button>
  </ts-empty-state-actions>
</ts-empty-state>

SVG

A custom SVG can be passed in as a template. If no SVG is passed in, a default will be used.

<ts-empty-state [svgTemplate]="mySvg"></ts-empty-state>

<ng-template #mySvg>
  <svg>...</svg>
</ng-template>

tslib @angular-devkit/schematics @schematics/angular

@everything-registry/sub-chunk-905 @zalastax/nolb-_ter @infinitebrahmanuniverse/nolb-_ter

1.1.0

3 years ago

1.0.0