Following the Style Guide

In order to maintain a consistent experience across Cloud Apps, Ex Libris has developed a Cloud App Style Guide.

In this tutorial we will show an example of several of the elements of the style guide. There is no interaction with external resources, only HTML and CSS in the component.

• The “Home” and “Reset List” buttons at the top of the component use the action buttons style
• When the list is populated with a simulated back-end call, a loading spinner is displayed
• The items are shown as a mat-list, and a delete icon button is shown for each row when hovered over
• When all of the items are removed, the empty list indicator is shown
• When the “Reset List” button is clicked, a confirmation dialog is displayed. Clicking “Yes” will repopulate the list.
• An alert is shown to indicate the list was successfully refreshed