mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-08 06:32:35 +01:00
feat: add a bunch of new Nebular demos (#1911)
This commit is contained in:
Denis Strigo
GitHub
parent
c594a5a4c5
commit
3f1f4c558b
185 changed files with 5176 additions and 422 deletions
|
|
@ -0,0 +1,41 @@
|
|||
<nb-card [nbSpinner]="true" nbSpinnerStatus="active">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="disabled">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="warning">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="danger">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="success">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="info">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-spinner-color',
|
||||
templateUrl: 'spinner-color.component.html',
|
||||
})
|
||||
|
||||
export class SpinnerColorComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button With Spinner</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-12">
|
||||
<button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
|
||||
<button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
|
||||
<button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="xsmall" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
button {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.size-medium-group {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-spinner-in-buttons',
|
||||
templateUrl: 'spinner-in-buttons.component.html',
|
||||
styleUrls: ['spinner-in-buttons.component.scss'],
|
||||
})
|
||||
|
||||
export class SpinnerInButtonsComponent {
|
||||
|
||||
loadingLargeGroup = false;
|
||||
loadingMediumGroup = false;
|
||||
|
||||
toggleLoadingLargeGroupAnimation() {
|
||||
this.loadingLargeGroup = true;
|
||||
|
||||
setTimeout(() => this.loadingLargeGroup = false, 3000);
|
||||
}
|
||||
|
||||
toggleLoadingMediumGroupAnimation() {
|
||||
this.loadingMediumGroup = true;
|
||||
|
||||
setTimeout(() => this.loadingMediumGroup = false, 3000);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<nb-card size="xsmall">
|
||||
<nb-card-body>
|
||||
<nb-tabset fullWidth (changeTab)="toggleLoadingAnimation()">
|
||||
<nb-tab tabTitle="Tab 1" [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="xxlarge">
|
||||
<p>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object.
|
||||
</p>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Tab 2" [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="xxlarge">
|
||||
<p>
|
||||
Nebular's primary goal is to assemble together and connect the most awesome features and libraries
|
||||
creating an efficient ecosystem to speed up and simplify the development.
|
||||
</p>
|
||||
</nb-tab>
|
||||
|
||||
</nb-tabset>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-tab {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-spinner-in-tabs',
|
||||
templateUrl: 'spinner-in-tabs.component.html',
|
||||
styleUrls: ['spinner-in-tabs.component.scss'],
|
||||
})
|
||||
|
||||
export class SpinnerInTabsComponent {
|
||||
|
||||
loading = false;
|
||||
|
||||
toggleLoadingAnimation() {
|
||||
this.loading = true;
|
||||
setTimeout(() => this.loading = false, 1000);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<nb-card [nbSpinner]="true" nbSpinnerSize="xxsmall">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="xsmall">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="small">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="medium">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="large">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="xlarge">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="xxlarge">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-spinner-sizes',
|
||||
templateUrl: 'spinner-sizes.component.html',
|
||||
})
|
||||
|
||||
export class SpinnerSizesComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-spinner-sizes></ngx-spinner-sizes>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-spinner-color></ngx-spinner-color>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-spinner-in-buttons></ngx-spinner-in-buttons>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-spinner-in-tabs></ngx-spinner-in-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
button {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/deep/ nb-spinner {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
17
src/app/pages/extra-components/spinner/spinner.component.ts
Normal file
17
src/app/pages/extra-components/spinner/spinner.component.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-spinner',
|
||||
templateUrl: 'spinner.component.html',
|
||||
styleUrls: ['spinner.component.scss'],
|
||||
})
|
||||
|
||||
export class SpinnerComponent {
|
||||
|
||||
loading = false;
|
||||
|
||||
toggleLoadingAnimation() {
|
||||
this.loading = true;
|
||||
setTimeout(() => this.loading = false, 3000);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue