Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-24 18:26:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update to Angular 8, Nebular 4 (#2114)

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-07-02 16:18:09 +03:00 • committed by Sergey Andrievskiy
parent 537e6a77b0
commit e9600b4a07
323 changed files with 7421 additions and 14161 deletions
Download patch file Download diff file Expand all files Collapse all files

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;
}
}
}

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

@ -1,35 +1,31 @@
<div class="row">
<div class="col-md-12 col-lg-12 col-xxxl-6">
<nb-card>
<nb-card-header>Progress Bar Status</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="20" status="primary">primary</nb-progress-bar>
<nb-progress-bar [value]="40" status="info">info</nb-progress-bar>
<nb-progress-bar [value]="60" status="success">success</nb-progress-bar>
<nb-progress-bar [value]="80" status="warning">warning</nb-progress-bar>
<nb-progress-bar [value]="100" status="danger">danger</nb-progress-bar>
</nb-card-body>
</nb-card>
<ngx-interactive-progress-bar></ngx-interactive-progress-bar>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<nb-card>
<nb-card-header>Progress Bar Size</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="20" size="xs">xs</nb-progress-bar>
<nb-progress-bar [value]="40" size="sm">sm</nb-progress-bar>
<nb-progress-bar [value]="60">none</nb-progress-bar>
<nb-progress-bar [value]="80" size="lg">lg</nb-progress-bar>
<nb-progress-bar [value]="100" size="xlg">xlg</nb-progress-bar>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Progress Bar Status</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="20" status="primary">primary</nb-progress-bar>
<nb-progress-bar [value]="40" status="info">info</nb-progress-bar>
<nb-progress-bar [value]="60" status="success">success</nb-progress-bar>
<nb-progress-bar [value]="80" status="warning">warning</nb-progress-bar>
<nb-progress-bar [value]="100" status="danger">danger</nb-progress-bar>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Progress Bar Value</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="40" status="primary" [displayValue]="true"></nb-progress-bar>
<nb-progress-bar [value]="60" status="primary">Custom value</nb-progress-bar>
</nb-card-body>
</nb-card>
</div>
</div>
<ngx-interactive-progress-bar></ngx-interactive-progress-bar>
<nb-card>
<nb-card-header>Progress Bar Size</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="20" size="tiny">tiny</nb-progress-bar>
<nb-progress-bar [value]="40" size="small">small</nb-progress-bar>
<nb-progress-bar [value]="60" size="medium">medium (default)</nb-progress-bar>
<nb-progress-bar [value]="80" size="large">large</nb-progress-bar>
<nb-progress-bar [value]="100" size="giant">giant</nb-progress-bar>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Progress Bar Value</nb-card-header>
<nb-card-body>
<nb-progress-bar [value]="40" status="primary" [displayValue]="true"></nb-progress-bar>
<nb-progress-bar [value]="60" status="primary">Custom text</nb-progress-bar>
</nb-card-body>
</nb-card>