kolay-stepper v0.1.2

Kolay Stepper

Quick Start

npm install kolay-stepper --save

Angular

This library is built to work with Angular.

Module Format

This library ships as a "flat ES module" (FESM).

Simple Example

import { KolayStepperModule } from 'kolay-stepper';

@NgModule({
    imports: [
        KolayStepperModule,
    ],
})

import { StepInterface } from 'kolay-stepper';

@Component({
    selector: 'feature-component',
    template: `
    <kolay-stepper
        [steps]="steps"
        [currentStep]="currentStep"
        [nextLabel]="'Forward'"
        [completedLabel]="'Save'"
        [valid]="valid"
        (stepChanged)="call()"
        (goto)="update($event)"
        (completed)="save()">
    </kolay-stepper>
    `
})

public steps: StepInterface<string>[];

this.steps = [
    {
        value: 'personal',
        name: 'Personal',
        order: 0,
        valid: true,
        clickable: true,
    },
    {
        value: 'education',
        name: 'Education',
        order: 1,
        valid: true,
        clickable: false,
    },
    {
        value: 'Additional',
        name: 'additional',
        order: 2,
        valid: true,
        clickable: false,
    },
];

Step Interface

• value [T] required Its the unique value of step.

• name [string] required Specify the name of step.

• order [number] required Speficy the order of the step. Starts from zero and sort the steps by provided orders.

• valid [boolean] required Control step behavior and add color to the step.

• disable [boolean] optional Specify step visibility. Can be used to hide step in specific cases.

• clickable [boolean] required Disable pointer events if its false.

Kolay Stepper Component

• steps [StepInterface<generic>[]] Array of step objects

• currentStep StepInterface<generic> Current step

• nextLabel [string] Allows to customize button label.

• completedLabel [string] Allows to customize button label for the last step.

• valid [boolean] Provide validation info to stepper.

• stepChanged [event handler] The expression specified will be invoked whenever the step changes via a click.

• goto [event handler] The expression specified will be invoked whenever the step change validated.

• completed [event handler] The expression specified will be invoked whenever the last step validated.

Styling

In progress...