Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(progress): use Nebular button and icon

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-20 12:37:20 +03:00
parent 1cb04f3bb3
commit aa1b6656d2
4 changed files with 31 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/pages/extra-components/extra-components.module.ts
View file

@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
import { import {
NbActionsModule, NbActionsModule,
NbAlertModule, NbAlertModule,
NbButtonModule,
NbCalendarKitModule, NbCalendarKitModule,
NbCalendarModule, NbCalendarModule,
NbCalendarRangeModule, NbCalendarRangeModule,
NbCardModule, NbCardModule,
NbChatModule, NbChatModule,
NbIconModule,
NbProgressBarModule, NbProgressBarModule,
NbSelectModule, NbSelectModule,
NbSpinnerModule, NbSpinnerModule,
@ -58,11 +60,13 @@ const COMPONENTS = [
const MODULES = [ const MODULES = [
NbAlertModule, NbAlertModule,
NbActionsModule, NbActionsModule,
NbButtonModule,
NbCalendarModule, NbCalendarModule,
NbCalendarKitModule, NbCalendarKitModule,
NbCalendarRangeModule, NbCalendarRangeModule,
NbCardModule, NbCardModule,
NbChatModule, NbChatModule,
NbIconModule,
NbProgressBarModule, NbProgressBarModule,
NbSelectModule, NbSelectModule,
NbSpinnerModule, NbSpinnerModule,

12
src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html
View file

@ -2,13 +2,13 @@
<nb-card-header>Progress Bar Interactive</nb-card-header> <nb-card-header>Progress Bar Interactive</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="container"> <div class="container">
<nb-actions size="medium"> <button nbButton appearance="ghost" [disabled]="canDecrease ? null : ''" (click)="decreaseValue()">
<nb-action icon="nb-arrow-down" (click)="setValue(value - 25)"></nb-action> <nb-icon icon="minus" pack="eva"></nb-icon>
</nb-actions> </button>
<nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar> <nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
<nb-actions size="medium"> <button nbButton appearance="ghost" [disabled]="canIncrease ? null : ''" (click)="increaseValue()">
<nb-action icon="nb-arrow-up" (click)="setValue(value + 25)"></nb-action> <nb-icon icon="plus" pack="eva"></nb-icon>
</nb-actions> </button>
</div> </div>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>

1
src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
View file

@ -8,5 +8,6 @@
nb-progress-bar { nb-progress-bar {
flex: 1; flex: 1;
margin: 0 1rem;
} }
} }

24
src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts
View file

@ -9,10 +9,6 @@ export class InteractiveProgressBarComponent {
value = 25; value = 25;
setValue(newValue) {
this.value = Math.min(Math.max(newValue, 0), 100);
}
get status() { get status() {
if (this.value <= 25) { if (this.value <= 25) {
return 'danger'; return 'danger';
@ -24,4 +20,24 @@ export class InteractiveProgressBarComponent {
return 'success'; return 'success';
} }
} }
get canIncrease(): boolean {
return this.value < 100;
}
get canDecrease(): boolean {
return this.value > 0;
}
decreaseValue() {
if (this.value > 0) {
this.value -= 25;
}
}
increaseValue() {
if (this.value < 100) {
this.value += 25;
}
}
} }