Basic controls

Pip.WebUI.Controls modules provides controls mix

Color picker

Control allows to select a color from predefined pallette

Using

<pip-color-picker [colors]="colors" [selected]="color" (changeColor)="colorChanged($event)"></pip-color-picker>

Example on the image

Empty state

Components show a placeholder for pages without data. It gives an explanation and provides one or few actions to get started

Using

Template:

<pip-empty-state>
    <pip-empty-state-title text="No tasks for today!" imageUrl="./assets/empty.svg"></pip-empty-state-title>
    <pip-empty-state-actions [actions]="emptyStateActions"></pip-empty-state-actions>
</pip-empty-state>

Initialized data:

emptyStateActions: any[] = [
	{ title: 'Add task', action: () => { console.log('on add task clicked'); } },
	{ title: 'Import tasks', action: () => { console.log('on export tasks clicked'); } }
];

Example on the image

Check item

Styled list item with checkboxes and multiple text headers

Using

<pip-check-item *ngFor="let shoe of typesOfShoes; let i = index" 
    [id]="i"
    [title]="shoe.title" 
    [subtitle]="shoe.subtitle"
    [subtitleIcon]="shoe.subtitleIcon" 
    [textBold] = "shoe.textBold"
    [text] = "shoe.text"
    (select) = "select($event)"
    [checked] = "shoe.checked"
    (check) = "check($event)">
</pip-check-item>

Example on the image

Jumbotron

Styled information container. Usually used to show statistics and other historical information

Using

<pip-jumbotron>
    <pip-jumbotron-picture src="assets/empty.svg" width="220px" height="240px"></pip-jumbotron-picture>
    <pip-jumbotron-content title="Failed workflows" icon="chevron_right">
        <pip-jumbotron-item *ngFor="let item of items" [item]="item"></pip-jumbotron-item>
    </pip-jumbotron-content>
    <pip-jumbotron-content title="Failed workflows" icon="chevron_right">
        <pip-jumbotron-item *ngFor="let item of items" [item]="item"></pip-jumbotron-item>
    </pip-jumbotron-content>
</pip-jumbotron>

Example on the image

Slider

Component toggles animated slides that contain any template: text, images, etc.

Using

<pip-slider #slider>
    <pip-slide *ngFor="let slide of slides; let i = index" fxLayout="column" fxLayoutAlign="center center">
        <img height="100%" [src]="slide">
    </pip-slide>
    <pip-slider-button direction="backward" [disabled]="slider.isFirst"></pip-slider-button>
    <pip-slider-button [disabled]="slider.isLast"></pip-slider-button>
</pip-slider>

Example on the image

Installation

To install this module using npm:

npm install pip-webui2-controls --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.