UI Design Library

When working with user interfaces, it is important to maintain a consistent look and feel. To help the developer with building the UI, the SDK provides a UI Design Library. The library only supports Angular at the moment, but will we updated for general use in the future.

The NPM package “ui-angular-components” provides Angular components for the most common fields like: text input, number input, labels, buttons, icons etc.

Creating HTML layouts using the UI Design Library

Documentation for all the html elements in the UI Design Library can be found in the “index.html” file in the “ui-components-reference” folder.

The following demonstrates how to use an ur-button element in html:

<div class="example">
     <ur-button
          type="cta"
          (handleClick)="exampleButtonPressed()"
          [disabled]="!isExampleButtonEnabled()"
    >{{ 'presenter.example.button' | translate }}</ur-button>
</div>

This will show a button using the same look and feel as the rest of the application. The ‘type’ attribute defines the look of the button, cta means that it is the primary button on the page. Please see the “ui-components-reference” documentation for all possible values and how they look.