https://github.com/explooosion/ngx-status-button
This is a button status design by colder build with angular7.
https://github.com/explooosion/ngx-status-button
angular angular7 button status
Last synced: 3 months ago
JSON representation
This is a button status design by colder build with angular7.
- Host: GitHub
- URL: https://github.com/explooosion/ngx-status-button
- Owner: explooosion
- License: mit
- Created: 2018-10-28T04:40:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-31T14:32:25.000Z (over 7 years ago)
- Last Synced: 2025-11-27T09:19:35.378Z (7 months ago)
- Topics: angular, angular7, button, status
- Language: TypeScript
- Size: 185 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://forthebadge.com)
[](https://forthebadge.com)
[](https://forthebadge.com)
# ngx-status-button
This is a button status design by colder build with angular7.
## Design
Inspired by [UI Movement](https://uimovement.com) - [In-button status](https://uimovement.com/ui/6526/in-button-status/)。
## Installation
Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
- Use npm
```bash
npm install --save ngx-status-button
```
- Use yarn
```bash
yarn add ngx-status-button
```
### Importing Modules
app.module.ts
```typescript
import { NgxStatusButtonModule } from 'ngx-status-button';
@NgModule({
imports: [
NgxStatusButtonModule,
],
})
```
### Usage
HTML
```html
```
TS
```typescript
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
```typescript
// 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
```html
```
TS
```typescript
stepNameI = 'your-step-name';
```
## Development
```sh
git clone https://github.com/explooosion/ngx-status-button.git
```
```sh
yarn
```
## Run
```sh
yarn start
```
## Build
```sh
yarn build
```
## License
[MIT](http://opensource.org/licenses/MIT)