@uoa/controls v0.1.4

Uoa Controls

@uoa/controls is an angular library containing components which may be useful across multiple applications. Documentation for each component is below:

Requirements: Angular 8.0.2 or higher.

Accordion

The accordion is styled using UOA theming and can be configured to expand sub objects one at a time or any at once. Components of the accordion are described below.

uoa-controls/src/lib/uoa-accordion

The main accordion component to use in your app. The accordion currently can only contain uoa-expandable-panels. An example of usage is below:

<uoa-accordion multiSelect="true" (panelPinned)="onPanelPinned($event)" (panelUnPinned)="onPanelUnPinned($event)">
    <uoa-expandable-panel *ngFor="let cat of categoryComponents$ | async" [title]="cat">
        <app-dynamic-category [category]="cat"></app-dynamic-category>
    </uoa-expandable-panel>
</uoa-accordion>

This example showcases all optional features currently supported. Child components can be enumerated from a data source inside of uoa-expandable-panels. Panels can be pinned, but your app is responsible for recording this and re-ordering the child components in the model (categoryComponents$ in the example). In the profile-page app where the example comes from, we use another component app-dynamic-category to inject components at runtime based on logic conditions found in categoryComponents$. In a simpler app, this might be text taken from a property of each categoryComponents$, or it might even be hard-coded in the case of a basic FAQ.

uoa-controls/src/lib/uoa-expandable-panel

A panel which can contain any other component as a content child. This is used internally, and you shouldn't need to worry about it, unless you want to customise panel functionality or animation.

Toolbar button

Toolbar buttons for use in any parent, eg. flex container. Default layout attribute is "stacked" which is an icon above text. Use text for button text and iconSrc for icon url relative to project base. You can also show an io-style notifications bubble above the icon. Event for full button area can be captured as per standard angular events. Usage example:

<uoa-toolbar-button text="Affiliations" [notifications]="notifications.length" iconSrc="assets/ic_assignment_ind.svg" (click)="popupAffiliations($event)"></uoa-toolbar-button>