ngx-status-button

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

Usage no npm install needed!

<script type="module">
  import ngxStatusButton from 'https://cdn.skypack.dev/ngx-status-button';
</script>

README

forthebadge forthebadge forthebadge

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