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 {
NbActionsModule,
NbAlertModule,
NbButtonModule,
NbCalendarKitModule,
NbCalendarModule,
NbCalendarRangeModule,
NbCardModule,
NbChatModule,
NbIconModule,
NbProgressBarModule,
NbSelectModule,
NbSpinnerModule,
@ -58,11 +60,13 @@ const COMPONENTS = [
const MODULES = [
NbAlertModule,
NbActionsModule,
NbButtonModule,
NbCalendarModule,
NbCalendarKitModule,
NbCalendarRangeModule,
NbCardModule,
NbChatModule,
NbIconModule,
NbProgressBarModule,
NbSelectModule,
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-body>
<div class="container">
<nb-actions size="medium">
<nb-action icon="nb-arrow-down" (click)="setValue(value - 25)"></nb-action>
</nb-actions>
<button nbButton appearance="ghost" [disabled]="canDecrease ? null : ''" (click)="decreaseValue()">
<nb-icon icon="minus" pack="eva"></nb-icon>
</button>
<nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
<nb-actions size="medium">
<nb-action icon="nb-arrow-up" (click)="setValue(value + 25)"></nb-action>
</nb-actions>
<button nbButton appearance="ghost" [disabled]="canIncrease ? null : ''" (click)="increaseValue()">
<nb-icon icon="plus" pack="eva"></nb-icon>
</button>
</div>
</nb-card-body>
</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 {
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;
setValue(newValue) {
this.value = Math.min(Math.max(newValue, 0), 100);
}
get status() {
if (this.value <= 25) {
return 'danger';
@ -24,4 +20,24 @@ export class InteractiveProgressBarComponent {
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;
}
}
}