Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-22 07:54:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add a bunch of new Nebular demos (#1911)

Browse source
This commit is contained in:
Denis Strigo 2018-11-19 16:57:35 +02:00 • committed by GitHub
parent c594a5a4c5
commit 3f1f4c558b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
185 changed files with 5176 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,14 @@
<nb-card>
<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>
<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>
</div>
</nb-card-body>
</nb-card>

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

@ -0,0 +1,12 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
.container {
display: flex;
align-items: center;
}
nb-progress-bar {
flex: 1;
}
}

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

@ -0,0 +1,27 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-interactive-progress-bar',
templateUrl: 'interactive-progress-bar.component.html',
styleUrls: ['interactive-progress-bar.component.scss'],
})
export class InteractiveProgressBarComponent {
value = 25;
setValue(newValue) {
this.value = Math.min(Math.max(newValue, 0), 100);
}
get status(){
if (this.value <= 25) {
return 'danger';
} else if (this.value <= 50) {
return 'warning';
} else if (this.value <= 75) {
return 'info';
} else {
return 'success';
}
}
}

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

@ -0,0 +1,35 @@
<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 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>

7
src/app/pages/extra-components/progress-bar/progress-bar.component.scss Normal file
View file

@ -0,0 +1,7 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-progress-bar ~ nb-progress-bar {
margin-top: 1rem;
}
}

10
src/app/pages/extra-components/progress-bar/progress-bar.component.ts Normal file
View file

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-progress-bar',
templateUrl: 'progress-bar.component.html',
styleUrls: ['progress-bar.component.scss'],
})
export class ProgressBarComponent {
}