ngx-status-button

This is a button status design by colder build with angular7.

Design

Inspired by UI Movement - In-button status。

Installation

Installation is done using the npm install command:

• Use npm

npm install --save ngx-status-button

• Use yarn

yarn add ngx-status-button

Importing Modules

app.module.ts

import { NgxStatusButtonModule } from 'ngx-status-button';

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

Usage

HTML

<ngx-status-button 
  [step]="step" 
  (click)="onNext()"
>
</ngx-status-button>

TS

step = 1;

onNext() {

  // stop at step 4
  this.step = this.step >= 4 ? 4 : this.step + 1;

  // cycle step
  this.step = this.step >= 4 ? 1 : this.step + 1;
}

Input

// Status button name
@Input() public stepNameI: String = 'Pay';
@Input() public stepNameII: String = 'Processing';
@Input() public stepNameIII: String = 'Success!';
@Input() public stepNameIV: String = 'Proceed';

// Step 1~4 to control animation
@Input() public step: number;

Change step name

You can change the step name for 1~4.

HTML

<ngx-status-button 
  [stepNameI]="stepNameI"
>
</ngx-status-button>

TS

stepNameI = 'your-step-name';

Development

git clone https://github.com/explooosion/ngx-status-button.git

yarn

Run

yarn start

Build

yarn build

License

MIT