Cloud Apps Style Guide
This Cloud Apps style guide is intended to provide users with a consistent experience across apps. Some of these styles are handled automatically by CSS included in the Cloud App project and by the Angular Material theme styles. Others will require you to take these guidelines into consideration when you build your app. Guidelines which must be implemented in your code include a code sample below.
Colors are set by the included CSS and theme.
Button colors are set by the included CSS and theme. However, you should use the
mat-flat-button attribute and indicate whether the color should be
<button mat-flat-button color="primary">
<mat-form-field appearance="standard"> <mat-checkbox labelPosition="before">
Fonts are handled by the included CSS.
We use the material icon library which can be browsed here.
Actions buttons should appear at the top of the layout. The included CSS has a
cloudapp-actions class which provides for spacing and right-align. Primary button should be on the right.
<div class="cloudapp-actions"> <button mat-flat-button color="secondary" [routerLink]="['/']">Cancel</button> <button mat-flat-button color="primary" (click)="update()">Update</button> </div>
Cloud App Standard Layout
Cloud App Full Screen Layout
To provide and indication to the user that the page is loading, you can use a div with the provided class called
loading-shade and a standard
<div class="loading-shade" *ngIf="loading"> <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner> </div>
Assets & Images
When published to the Ex Libris platform, Cloud App are served under a sub-directory rather than the root directory. Therefore, assets such as images should be referenced with a relative link (
./assets/...), such as: