mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02: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
|
|
@ -64,7 +64,7 @@
|
|||
"intl": "1.2.5",
|
||||
"ionicons": "2.0.1",
|
||||
"leaflet": "1.2.0",
|
||||
"nebular-icons": "1.0.9",
|
||||
"nebular-icons": "1.1.0",
|
||||
"ng2-ckeditor": "^1.2.2",
|
||||
"ng2-completer": "2.0.8",
|
||||
"ng2-smart-table": "1.3.5",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ import {
|
|||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NbProgressBarModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarRangeModule,
|
||||
NbStepperModule,
|
||||
NbButtonModule,
|
||||
NbInputModule,
|
||||
NbAccordionModule,
|
||||
NbDatepickerModule,
|
||||
NbDialogModule,
|
||||
NbWindowModule,
|
||||
NbListModule,
|
||||
NbToastrModule,
|
||||
NbAlertModule,
|
||||
NbSpinnerModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbChatModule,
|
||||
NbTooltipModule,
|
||||
NbCalendarKitModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { NbSecurityModule } from '@nebular/security';
|
||||
|
|
@ -68,6 +86,24 @@ const NB_MODULES = [
|
|||
NgbModule,
|
||||
NbSecurityModule, // *nbIsGranted directive,
|
||||
NbProgressBarModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarRangeModule,
|
||||
NbStepperModule,
|
||||
NbButtonModule,
|
||||
NbListModule,
|
||||
NbToastrModule,
|
||||
NbInputModule,
|
||||
NbAccordionModule,
|
||||
NbDatepickerModule,
|
||||
NbDialogModule,
|
||||
NbWindowModule,
|
||||
NbAlertModule,
|
||||
NbSpinnerModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbChatModule,
|
||||
NbTooltipModule,
|
||||
NbCalendarKitModule,
|
||||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
|
|
@ -107,6 +143,13 @@ const NB_THEME_PROVIDERS = [
|
|||
).providers,
|
||||
...NbSidebarModule.forRoot().providers,
|
||||
...NbMenuModule.forRoot().providers,
|
||||
...NbDatepickerModule.forRoot().providers,
|
||||
...NbDialogModule.forRoot().providers,
|
||||
...NbWindowModule.forRoot().providers,
|
||||
...NbToastrModule.forRoot().providers,
|
||||
...NbChatModule.forRoot({
|
||||
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
|
||||
}).providers,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
33
src/app/pages/bootstrap/bootstrap-routing.module.ts
Normal file
33
src/app/pages/bootstrap/bootstrap-routing.module.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: BootstrapComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'modal',
|
||||
component: ModalsComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class BootstrapRoutingModule { }
|
||||
10
src/app/pages/bootstrap/bootstrap.component.ts
Normal file
10
src/app/pages/bootstrap/bootstrap.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-bootstrap',
|
||||
template: `
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
})
|
||||
export class BootstrapComponent {
|
||||
}
|
||||
36
src/app/pages/bootstrap/bootstrap.module.ts
Normal file
36
src/app/pages/bootstrap/bootstrap.module.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
||||
import { BootstrapRoutingModule } from './bootstrap-routing.module';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ModalComponent } from './modals/modal/modal.component';
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
const COMPONENTS = [
|
||||
BootstrapComponent,
|
||||
ModalsComponent,
|
||||
ModalComponent,
|
||||
FormInputsComponent,
|
||||
];
|
||||
|
||||
const ENTRY_COMPONENTS = [
|
||||
ModalComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
BootstrapRoutingModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
entryComponents: [
|
||||
...ENTRY_COMPONENTS,
|
||||
],
|
||||
})
|
||||
export class BootstrapModule { }
|
||||
|
|
@ -4,8 +4,6 @@
|
|||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
<ngx-action-groups></ngx-action-groups>
|
||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5">
|
||||
|
|
@ -6,12 +6,10 @@ import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
|||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { ActionGroupsComponent } from './action-groups/action-groups.component';
|
||||
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
|
||||
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
|
||||
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
|
||||
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
|
||||
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
|
|
@ -19,12 +17,10 @@ const components = [
|
|||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
ActionGroupsComponent,
|
||||
DropdownButtonsComponent,
|
||||
BlockLevelButtonsComponent,
|
||||
ButtonGroupsComponent,
|
||||
IconButtonsComponent,
|
||||
LabeledActionsGroupComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
235
src/app/pages/bootstrap/form-inputs/form-inputs.component.html
Normal file
235
src/app/pages/bootstrap/form-inputs/form-inputs.component.html
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Project" class="form-control"/>
|
||||
</div>
|
||||
<div class="row full-name-inputs">
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Nick" class="form-control"/>
|
||||
</div>
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Last Name" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="password" placeholder="Password" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group has-person-icon">
|
||||
<input type="text" placeholder="With Icon" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-rounded">
|
||||
<input type="text" placeholder="Rounded border" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Project" class="form-control"/>
|
||||
<small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
|
||||
</small>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Disabled input" class="form-control" disabled/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" placeholder="Small Input" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" placeholder="Large Input" class="form-control"/>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Input Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon success">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username"/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mail-btn-group">
|
||||
<span class="input-group-prepend">
|
||||
<button class="btn btn-primary btn-icon input-group-text">
|
||||
<i class="ion-ios-email-outline"></i>
|
||||
</button>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Recipient's username">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary input-group-text">
|
||||
@example.com
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-danger input-group-text">
|
||||
Search
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Action</li>
|
||||
<li class="dropdown-item">Another action</li>
|
||||
<li class="dropdown-item">Something else here</li>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<li class="dropdown-item">Separated link</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Selects</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<label>Simple Select</label>
|
||||
<select class="form-control">
|
||||
<option>Minsk</option>
|
||||
<option>Gomel</option>
|
||||
<option>Brest</option>
|
||||
<option>Grodno</option>
|
||||
<option>Mogilev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Multiple Select</label>
|
||||
<select multiple class="form-control">
|
||||
<option>Item 1</option>
|
||||
<option>Item 2</option>
|
||||
<option>Item 3</option>
|
||||
<option>Item 4</option>
|
||||
<option>Item 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Input Styles</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group input-group-border-only">
|
||||
<input type="text" placeholder="Border Only" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Default Input" class="form-control">
|
||||
</div>
|
||||
<div class="input-group input-group-fill-only">
|
||||
<input type="text" placeholder="Fill Only" class="form-control">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Success" class="form-control form-control-success">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes row">
|
||||
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
|
||||
</div>
|
||||
<div class="form-group has-success">
|
||||
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes col-sm-4">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="b-checkbox">
|
||||
<label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-radio col-sm-4">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 3</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="demo-disabled-checkbox-radio col-sm-4">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Disabled Radio</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-body class="demo-rating">
|
||||
<span class="rating-header">Rating</span>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="starRate" max=5>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-android-star" *ngIf="fill === 100"></i>
|
||||
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ starRate }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="heartRate" max=5>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-ios-heart" *ngIf="fill === 100"></i>
|
||||
<i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ heartRate }}</span>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
130
src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
Normal file
130
src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.custom-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-disabled-checkbox-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-rating {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group.has-person-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\F47D';
|
||||
font-family: 'Ionicons';
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 1rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
ngb-rating {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ngb-rating i {
|
||||
color: nb-theme(color-success);
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
button:not(.btn-icon) {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
Normal file
12
src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-form-inputs',
|
||||
styleUrls: ['./form-inputs.component.scss'],
|
||||
templateUrl: './form-inputs.component.html',
|
||||
})
|
||||
export class FormInputsComponent {
|
||||
|
||||
starRate = 2;
|
||||
heartRate = 4;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ComponentsComponent } from './components.component';
|
||||
import { TreeComponent } from './tree/tree.component';
|
||||
import { NotificationsComponent } from './notifications/notifications.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: ComponentsComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'tree',
|
||||
component: TreeComponent,
|
||||
}, {
|
||||
path: 'notifications',
|
||||
component: NotificationsComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ComponentsRoutingModule { }
|
||||
|
||||
export const routedComponents = [
|
||||
ComponentsComponent,
|
||||
TreeComponent,
|
||||
NotificationsComponent,
|
||||
];
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { TreeModule } from 'angular-tree-component';
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { ComponentsRoutingModule, routedComponents } from './components-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
ComponentsRoutingModule,
|
||||
TreeModule,
|
||||
ToasterModule.forRoot(),
|
||||
],
|
||||
declarations: [
|
||||
...routedComponents,
|
||||
],
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
|
||||
|
||||
import 'style-loader!angular2-toaster/toaster.css';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-notifications',
|
||||
styleUrls: ['./notifications.component.scss'],
|
||||
templateUrl: './notifications.component.html',
|
||||
})
|
||||
export class NotificationsComponent {
|
||||
constructor(private toasterService: ToasterService) {}
|
||||
|
||||
config: ToasterConfig;
|
||||
|
||||
position = 'toast-top-right';
|
||||
animationType = 'fade';
|
||||
title = 'HI there!';
|
||||
content = `I'm cool toaster!`;
|
||||
timeout = 5000;
|
||||
toastsLimit = 5;
|
||||
type = 'default';
|
||||
|
||||
isNewestOnTop = true;
|
||||
isHideOnClick = true;
|
||||
isDuplicatesPrevented = false;
|
||||
isCloseButton = true;
|
||||
|
||||
types: string[] = ['default', 'info', 'success', 'warning', 'error'];
|
||||
animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
|
||||
positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
|
||||
'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];
|
||||
|
||||
quotes = [
|
||||
{ title: null, body: 'We rock at <i>Angular</i>' },
|
||||
{ title: null, body: 'Titles are not always needed' },
|
||||
{ title: null, body: 'Toastr rock!' },
|
||||
{ title: 'What about nice html?', body: '<b>Sure you <em>can!</em></b>' },
|
||||
];
|
||||
|
||||
makeToast() {
|
||||
this.showToast(this.type, this.title, this.content);
|
||||
}
|
||||
|
||||
openRandomToast () {
|
||||
const typeIndex = Math.floor(Math.random() * this.types.length);
|
||||
const quoteIndex = Math.floor(Math.random() * this.quotes.length);
|
||||
const type = this.types[typeIndex];
|
||||
const quote = this.quotes[quoteIndex];
|
||||
|
||||
this.showToast(type, quote.title, quote.body);
|
||||
}
|
||||
|
||||
private showToast(type: string, title: string, body: string) {
|
||||
this.config = new ToasterConfig({
|
||||
positionClass: this.position,
|
||||
timeout: this.timeout,
|
||||
newestOnTop: this.isNewestOnTop,
|
||||
tapToDismiss: this.isHideOnClick,
|
||||
preventDuplicates: this.isDuplicatesPrevented,
|
||||
animation: this.animationType,
|
||||
limit: this.toastsLimit,
|
||||
});
|
||||
const toast: Toast = {
|
||||
type: type,
|
||||
title: title,
|
||||
body: body,
|
||||
timeout: this.timeout,
|
||||
showCloseButton: this.isCloseButton,
|
||||
bodyOutputType: BodyOutputType.TrustedHtml,
|
||||
};
|
||||
this.toasterService.popAsync(toast);
|
||||
}
|
||||
|
||||
clearToasts() {
|
||||
this.toasterService.clear();
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,6 @@ import { PlayerComponent } from './rooms/player/player.component';
|
|||
import { TrafficComponent } from './traffic/traffic.component';
|
||||
import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<div class="accordions-container row">
|
||||
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Toggle Accordion By Button</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button nbButton (click)="toggle()">Toggle First Item</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-accordion>
|
||||
<nb-accordion-item #item>
|
||||
<nb-accordion-item-header>
|
||||
Product Details
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header>
|
||||
Reviews
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header>
|
||||
Edit
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
</nb-accordion>
|
||||
</div>
|
||||
|
||||
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-accordion multi>
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header>
|
||||
Product Details
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header>
|
||||
Reviews
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
|
||||
<nb-accordion-item>
|
||||
<nb-accordion-item-header>
|
||||
Edit
|
||||
</nb-accordion-item-header>
|
||||
<nb-accordion-item-body>
|
||||
A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
|
||||
Originally, nebula was a name for any diffuse astronomical object,
|
||||
including galaxies beyond the Milky Way.
|
||||
</nb-accordion-item-body>
|
||||
</nb-accordion-item>
|
||||
</nb-accordion>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.accordion-container {
|
||||
nb-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.accordion-container {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-accordion',
|
||||
templateUrl: 'accordion.component.html',
|
||||
styleUrls: ['accordion.component.scss'],
|
||||
})
|
||||
export class AccordionComponent {
|
||||
|
||||
@ViewChild('item') accordion;
|
||||
|
||||
toggle() {
|
||||
this.accordion.toggle();
|
||||
}
|
||||
}
|
||||
46
src/app/pages/extra-components/alert/alert.component.html
Normal file
46
src/app/pages/extra-components/alert/alert.component.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-4 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Colored Alert</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-alert status="success">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="danger">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="primary">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="info">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="warning">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="active">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="disabled">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-4 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Outline Alert</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-alert outline="success">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="danger">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="primary">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="info">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="warning">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="active">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert outline="disabled">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-4 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Accent Alert</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-alert status="success" accent="danger">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="danger" accent="primary">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="primary" accent="info">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="info" accent="warning">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="warning" accent="danger">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="active" accent="disabled">You have been successfully authenticated!</nb-alert>
|
||||
<nb-alert status="disabled" accent="success">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
9
src/app/pages/extra-components/alert/alert.component.ts
Normal file
9
src/app/pages/extra-components/alert/alert.component.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-alert',
|
||||
templateUrl: 'alert.component.html',
|
||||
})
|
||||
export class AlertComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<p><code>NbCalendarKitModule</code> is a module that contains multiple useful components for building custom calendars.
|
||||
So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!</p>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-calendar-month-picker
|
||||
[(month)]="month"
|
||||
[cellComponent]="monthCellComponent"
|
||||
></nb-calendar-month-picker>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { CalendarKitMonthCellComponent } from './month-cell/month-cell.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-calendar-kit',
|
||||
templateUrl: 'calendar-kit.component.html',
|
||||
styleUrls: ['calendar-kit.component.scss'],
|
||||
entryComponents: [CalendarKitMonthCellComponent],
|
||||
})
|
||||
export class CalendarKitFullCalendarShowcaseComponent {
|
||||
month = new Date();
|
||||
monthCellComponent = CalendarKitMonthCellComponent;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<h4>{{ title }}</h4>
|
||||
<nb-calendar-day-picker
|
||||
[boundingMonths]="false"
|
||||
[visibleDate]="date"
|
||||
[date]="selectedValue"
|
||||
(dateChange)="select.emit($event)">
|
||||
</nb-calendar-day-picker>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { Component, EventEmitter } from '@angular/core';
|
||||
import {
|
||||
NbCalendarCell,
|
||||
NbCalendarDayPickerComponent,
|
||||
NbCalendarMonthModelService,
|
||||
NbDateService,
|
||||
} from '@nebular/theme';
|
||||
import { TranslationWidth } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-calendar-kit-month-cell',
|
||||
styleUrls: ['month-cell.component.scss'],
|
||||
templateUrl: 'month-cell.component.html',
|
||||
})
|
||||
export class CalendarKitMonthCellComponent extends NbCalendarDayPickerComponent<Date, Date>
|
||||
implements NbCalendarCell<Date, Date> {
|
||||
select: EventEmitter<Date> = new EventEmitter();
|
||||
selectedValue: Date;
|
||||
|
||||
constructor(private dateService: NbDateService<Date>, monthModel: NbCalendarMonthModelService<Date>) {
|
||||
super(monthModel);
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.dateService.getMonthName(this.date, TranslationWidth.Wide);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="row">
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
Selected date: {{ date | date }}
|
||||
</h2>
|
||||
<nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar>
|
||||
</div>
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
Selected range: {{ range.start | date }} - {{ range.end | date }}
|
||||
</h2>
|
||||
<nb-calendar-range [(range)]="range"></nb-calendar-range>
|
||||
</div>
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
Selected date: {{ date2 | date }}
|
||||
</h2>
|
||||
<nb-calendar
|
||||
[(date)]="date2"
|
||||
[dayCellComponent]="dayCellComponent"
|
||||
></nb-calendar>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.calendars-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nebular-calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbCalendarRange, NbDateService } from '@nebular/theme';
|
||||
import { DayCellComponent } from './day-cell/day-cell.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-calendar',
|
||||
templateUrl: 'calendar.component.html',
|
||||
styleUrls: ['calendar.component.scss'],
|
||||
entryComponents: [DayCellComponent],
|
||||
})
|
||||
export class CalendarComponent {
|
||||
|
||||
date = new Date();
|
||||
date2 = new Date();
|
||||
range: NbCalendarRange<Date>;
|
||||
dayCellComponent = DayCellComponent;
|
||||
|
||||
constructor(protected dateService: NbDateService<Date>) {
|
||||
this.range = {
|
||||
start: this.dateService.addDay(this.monthStart, 3),
|
||||
end: this.dateService.addDay(this.monthEnd, -3),
|
||||
};
|
||||
}
|
||||
|
||||
get monthStart(): Date {
|
||||
return this.dateService.getMonthStart(new Date());
|
||||
}
|
||||
|
||||
get monthEnd(): Date {
|
||||
return this.dateService.getMonthEnd(new Date());
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div>
|
||||
<div>{{ day }}</div>
|
||||
<span>{{ (day + 100) * day }}$</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 75%;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbCalendarDayCellComponent } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-day-cell',
|
||||
templateUrl: 'day-cell.component.html',
|
||||
styleUrls: ['day-cell.component.scss'],
|
||||
host: { '(click)': 'onClick()', 'class': 'day-cell' },
|
||||
})
|
||||
export class DayCellComponent extends NbCalendarDayCellComponent<Date> {
|
||||
}
|
||||
190
src/app/pages/extra-components/chat/bot-replies.ts
Normal file
190
src/app/pages/extra-components/chat/bot-replies.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
const botAvatar: string = 'https://i.ytimg.com/vi/Erqi5ckVoEo/hqdefault.jpg';
|
||||
|
||||
export const gifsLinks: string[] = [
|
||||
'https://media.tenor.com/images/ac287fd06319e47b1533737662d5bfe8/tenor.gif',
|
||||
'https://i.gifer.com/no.gif',
|
||||
'https://techcrunch.com/wp-content/uploads/2015/08/safe_image.gif',
|
||||
'http://www.reactiongifs.com/r/wnd1.gif',
|
||||
];
|
||||
export const imageLinks: string[] = [
|
||||
'https://picsum.photos/320/240/?image=357',
|
||||
'https://picsum.photos/320/240/?image=556',
|
||||
'https://picsum.photos/320/240/?image=339',
|
||||
'https://picsum.photos/320/240/?image=387',
|
||||
'https://picsum.photos/320/240/?image=30',
|
||||
'https://picsum.photos/320/240/?image=271',
|
||||
];
|
||||
const fileLink: string = 'http://google.com';
|
||||
|
||||
export const botReplies = [
|
||||
{
|
||||
regExp: /([H,h]ey)|([H,h]i)/g,
|
||||
answerArray: ['Hello!', 'Yes?', 'Yes, milord?', 'What can I do for you?'],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([H,h]elp)/g,
|
||||
answerArray: [`No problem! Try sending a message containing word "hey", "image",
|
||||
"gif", "file", "map", "quote", "file group" to see different message components`],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([I,i]mage)|(IMAGE)|([P,p]ic)|(Picture)/g,
|
||||
answerArray: ['Hey look at this!', 'Ready to work', 'Yes, master.'],
|
||||
type: 'pic',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: '',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([G,g]if)|(GIF)/g,
|
||||
type: 'gif',
|
||||
answerArray: ['No problem', 'Well done', 'You got it man'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: '',
|
||||
type: 'image/gif',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([F,f]ile group)|(FILE)/g,
|
||||
type: 'group',
|
||||
answerArray: ['Take it!', 'Job Done.', 'As you wish'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: fileLink,
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
{
|
||||
url: '',
|
||||
type: 'image/gif',
|
||||
},
|
||||
{
|
||||
url: '',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
icon: 'nb-compose',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([F,f]ile)|(FILE)/g,
|
||||
type: 'file',
|
||||
answerArray: ['Take it!', 'Job Done.', 'As you wish'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: fileLink,
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
],
|
||||
icon: 'nb-compose',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([M,m]ap)|(MAP)/g,
|
||||
type: 'map',
|
||||
answerArray: ['Done.', 'My sight is yours.', 'I shall be your eyes.'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'map',
|
||||
latitude: 53.914321,
|
||||
longitude: 27.5998355,
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([Q,q]uote)|(QUOTE)/g,
|
||||
type: 'quote',
|
||||
answerArray: ['Quoted!', 'Say no more.', 'I gladly obey.'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'quote',
|
||||
quote: '',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /(.*)/g,
|
||||
answerArray: ['Hello there! Try typing "help"'],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
39
src/app/pages/extra-components/chat/chat.component.html
Normal file
39
src/app/pages/extra-components/chat/chat.component.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<p class="chart-description">Here's a complete example build in a bot-like app. Type <code>help</code> to be able to receive different message types.
|
||||
Enjoy the conversation and the beautiful UI.</p>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="chat-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-chat title="Nebular Conversational UI" size="large" status="success">
|
||||
<nb-chat-message *ngFor="let msg of messages"
|
||||
[type]="msg.type"
|
||||
[message]="msg.text"
|
||||
[reply]="msg.reply"
|
||||
[sender]="msg.user.name"
|
||||
[date]="msg.date"
|
||||
[files]="msg.files"
|
||||
[quote]="msg.quote"
|
||||
[latitude]="msg.latitude"
|
||||
[longitude]="msg.longitude"
|
||||
[avatar]="msg.user.avatar">
|
||||
</nb-chat-message>
|
||||
<nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
|
||||
</nb-chat-form>
|
||||
</nb-chat>
|
||||
</div>
|
||||
<div class="chat-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<div class="chart-features">
|
||||
<p>Main features:</p>
|
||||
<ul>
|
||||
<li>different message types support (text, image, file, file group, map, etc)</li>
|
||||
<li>drag & drop for images and files with preview</li>
|
||||
<li>different UI styles</li>
|
||||
<li>custom action buttons (coming soon)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
59
src/app/pages/extra-components/chat/chat.component.scss
Normal file
59
src/app/pages/extra-components/chat/chat.component.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ nb-layout-column {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nb-chat {
|
||||
margin: 3rem auto 0;
|
||||
width: 500px;
|
||||
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin-bottom: 2rem;
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
|
||||
li {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-description {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
.chart-features {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
nb-chat {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
nb-chat {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.chart-description {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-chat {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/app/pages/extra-components/chat/chat.component.ts
Normal file
44
src/app/pages/extra-components/chat/chat.component.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { ChatService } from './chat.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chat',
|
||||
templateUrl: 'chat.component.html',
|
||||
styleUrls: ['chat.component.scss'],
|
||||
providers: [ ChatService ],
|
||||
})
|
||||
export class ChatComponent {
|
||||
|
||||
messages: any[];
|
||||
|
||||
constructor(protected chatService: ChatService) {
|
||||
this.messages = this.chatService.loadMessages();
|
||||
}
|
||||
|
||||
sendMessage(event: any) {
|
||||
const files = !event.files ? [] : event.files.map((file) => {
|
||||
return {
|
||||
url: file.src,
|
||||
type: file.type,
|
||||
icon: 'nb-compose',
|
||||
};
|
||||
});
|
||||
|
||||
this.messages.push({
|
||||
text: event.message,
|
||||
date: new Date(),
|
||||
reply: true,
|
||||
type: files.length ? 'file' : 'text',
|
||||
files: files,
|
||||
user: {
|
||||
name: 'Jonh Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
});
|
||||
const botReply = this.chatService.reply(event.message);
|
||||
if (botReply) {
|
||||
setTimeout(() => { this.messages.push(botReply); }, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/app/pages/extra-components/chat/chat.service.ts
Normal file
42
src/app/pages/extra-components/chat/chat.service.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { messages } from './messages';
|
||||
import { botReplies, gifsLinks, imageLinks } from './bot-replies';
|
||||
|
||||
@Injectable()
|
||||
export class ChatService {
|
||||
|
||||
|
||||
loadMessages() {
|
||||
return messages;
|
||||
}
|
||||
|
||||
loadBotReplies() {
|
||||
return botReplies;
|
||||
}
|
||||
|
||||
reply(message: string) {
|
||||
const botReply: any = this.loadBotReplies()
|
||||
.find((reply: any) => message.search(reply.regExp) !== -1);
|
||||
|
||||
if (botReply.reply.type === 'quote') {
|
||||
botReply.reply.quote = message;
|
||||
}
|
||||
|
||||
if (botReply.type === 'gif') {
|
||||
botReply.reply.files[0].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)];
|
||||
}
|
||||
|
||||
if (botReply.type === 'pic') {
|
||||
botReply.reply.files[0].url = imageLinks[Math.floor(Math.random() * imageLinks.length)];
|
||||
}
|
||||
|
||||
if (botReply.type === 'group') {
|
||||
botReply.reply.files[1].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)];
|
||||
botReply.reply.files[2].url = imageLinks[Math.floor(Math.random() * imageLinks.length)];
|
||||
}
|
||||
|
||||
botReply.reply.text = botReply.answerArray[Math.floor(Math.random() * botReply.answerArray.length)];
|
||||
return { ...botReply.reply };
|
||||
}
|
||||
}
|
||||
85
src/app/pages/extra-components/chat/messages.ts
Normal file
85
src/app/pages/extra-components/chat/messages.ts
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
export const messages = [
|
||||
{
|
||||
text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
reply: true,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hello, how are you?',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hey looks at that pic I just found!',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: 'https://i.gifer.com/no.gif',
|
||||
type: 'image/jpeg',
|
||||
icon: false,
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'What do you mean by that?',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'quote',
|
||||
quote: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Attached is an archive I mentioned',
|
||||
reply: true,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: 'https://i.gifer.com/no.gif',
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Meet me there',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'map',
|
||||
latitude: 40.714728,
|
||||
longitude: -73.998672,
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ExtraComponentsComponent } from './extra-components.component';
|
||||
import { TreeComponent } from './tree/tree.component';
|
||||
import { AlertComponent } from './alert/alert.component';
|
||||
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
|
||||
import { SpinnerComponent } from './spinner/spinner.component';
|
||||
import { CalendarComponent } from './calendar/calendar.component';
|
||||
import { ChatComponent } from './chat/chat.component';
|
||||
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
|
||||
import { AccordionComponent } from './accordion/accordion.component';
|
||||
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
|
||||
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
|
||||
import { ListComponent } from './list/list.component';
|
||||
import { StepperComponent } from './stepper/stepper.component';
|
||||
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: ExtraComponentsComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'calendar',
|
||||
component: CalendarComponent,
|
||||
},
|
||||
{
|
||||
path: 'stepper',
|
||||
component: StepperComponent,
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: ListComponent,
|
||||
},
|
||||
{
|
||||
path: 'infinite-list',
|
||||
component: InfiniteListComponent,
|
||||
},
|
||||
{
|
||||
path: 'form-inputs',
|
||||
component: NebularFormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'accordion',
|
||||
component: AccordionComponent,
|
||||
},
|
||||
{
|
||||
path: 'progress-bar',
|
||||
component: ProgressBarComponent,
|
||||
},
|
||||
{
|
||||
path: 'spinner',
|
||||
component: SpinnerComponent,
|
||||
},
|
||||
{
|
||||
path: 'alert',
|
||||
component: AlertComponent,
|
||||
},
|
||||
{
|
||||
path: 'tree',
|
||||
component: TreeComponent,
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'tab1',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: 'tab1',
|
||||
component: Tab1Component,
|
||||
},
|
||||
{
|
||||
path: 'tab2',
|
||||
component: Tab2Component,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'calendar-kit',
|
||||
component: CalendarKitFullCalendarShowcaseComponent,
|
||||
},
|
||||
{
|
||||
path: 'chat',
|
||||
component: ChatComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ExtraComponentsRoutingModule {
|
||||
}
|
||||
|
|
@ -6,5 +6,5 @@ import { Component } from '@angular/core';
|
|||
<router-outlet></router-outlet>
|
||||
`,
|
||||
})
|
||||
export class ComponentsComponent {
|
||||
export class ExtraComponentsComponent {
|
||||
}
|
||||
91
src/app/pages/extra-components/extra-components.module.ts
Normal file
91
src/app/pages/extra-components/extra-components.module.ts
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { TreeModule } from 'angular-tree-component';
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { ExtraComponentsRoutingModule } from './extra-components-routing.module';
|
||||
|
||||
// components
|
||||
import { ExtraComponentsComponent } from './extra-components.component';
|
||||
import { TreeComponent } from './tree/tree.component';
|
||||
import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component';
|
||||
import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component';
|
||||
import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component';
|
||||
import { SpinnerColorComponent } from './spinner/spinner-color/spinner-color.component';
|
||||
import { SpinnerComponent } from './spinner/spinner.component';
|
||||
import {
|
||||
InteractiveProgressBarComponent,
|
||||
} from './progress-bar/interactive-progress-bar/interactive-progress-bar.component';
|
||||
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
|
||||
import { AlertComponent } from './alert/alert.component';
|
||||
import { ChatComponent } from './chat/chat.component';
|
||||
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
|
||||
import { CalendarComponent } from './calendar/calendar.component';
|
||||
import { DayCellComponent } from './calendar/day-cell/day-cell.component';
|
||||
import { StepperComponent } from './stepper/stepper.component';
|
||||
import { ListComponent } from './list/list.component';
|
||||
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
|
||||
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
|
||||
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
|
||||
import { AccordionComponent } from './accordion/accordion.component';
|
||||
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
|
||||
import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
|
||||
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
|
||||
import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';
|
||||
|
||||
// service
|
||||
import { NewsService } from './services/news.service';
|
||||
|
||||
const COMPONENTS = [
|
||||
ExtraComponentsComponent,
|
||||
TreeComponent,
|
||||
AlertComponent,
|
||||
ProgressBarComponent,
|
||||
InteractiveProgressBarComponent,
|
||||
SpinnerComponent,
|
||||
SpinnerColorComponent,
|
||||
SpinnerSizesComponent,
|
||||
SpinnerInButtonsComponent,
|
||||
SpinnerInTabsComponent,
|
||||
CalendarComponent,
|
||||
DayCellComponent,
|
||||
ChatComponent,
|
||||
TabsComponent,
|
||||
Tab1Component,
|
||||
Tab2Component,
|
||||
StepperComponent,
|
||||
ListComponent,
|
||||
InfiniteListComponent,
|
||||
NewsPostComponent,
|
||||
NewsPostPlaceholderComponent,
|
||||
AccordionComponent,
|
||||
NebularFormInputsComponent,
|
||||
NebularSelectComponent,
|
||||
CalendarKitFullCalendarShowcaseComponent,
|
||||
CalendarKitMonthCellComponent,
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
NewsService,
|
||||
];
|
||||
|
||||
const MODULES = [
|
||||
ThemeModule,
|
||||
ExtraComponentsRoutingModule,
|
||||
TreeModule,
|
||||
ToasterModule.forRoot(),
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
...MODULES,
|
||||
],
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
providers: [
|
||||
...SERVICES,
|
||||
],
|
||||
})
|
||||
export class ExtraComponentsModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="row">
|
||||
<ngx-nebular-select></ngx-nebular-select>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.inputs-group-margin-bottom {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-nebular-form-inputs',
|
||||
templateUrl: 'nebular-form-inputs.component.html',
|
||||
styleUrls: ['nebular-form-inputs.component.scss'],
|
||||
})
|
||||
export class NebularFormInputsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select placeholder="Select Showcase" [(selected)]="commonSelectedItem">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Multiple Select</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select multiple placeholder="Multiple Select">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Cleanable</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select placeholder="Cleanable">
|
||||
<nb-option>Clean</nb-option>
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Placeholder</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select placeholder="Placeholder" status="primary">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Custom Label</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select placeholder="Custom Label" [(selected)]="selectedItem">
|
||||
<nb-select-label>
|
||||
Selected: {{ selectedItem }}
|
||||
</nb-select-label>
|
||||
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-select placeholder="Select Groups">
|
||||
|
||||
<nb-option-group title="Group 1">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-option-group>
|
||||
|
||||
<nb-option-group title="Group 2">
|
||||
<nb-option value="21">Option 21</nb-option>
|
||||
<nb-option value="22">Option 22</nb-option>
|
||||
<nb-option value="23">Option 23</nb-option>
|
||||
<nb-option value="24">Option 24</nb-option>
|
||||
</nb-option-group>
|
||||
|
||||
<nb-option-group title="Group 3">
|
||||
<nb-option value="31">Option 31</nb-option>
|
||||
<nb-option value="32">Option 32</nb-option>
|
||||
<nb-option value="33">Option 33</nb-option>
|
||||
<nb-option value="34">Option 34</nb-option>
|
||||
</nb-option-group>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Disabled Select</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select disabled placeholder="Disabled">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Disabled Items">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2" disabled>Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4" disabled>Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Disabled Groups">
|
||||
|
||||
<nb-option-group title="Group 1">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2" disabled>Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-option-group>
|
||||
|
||||
<nb-option-group title="Group 2" disabled>
|
||||
<nb-option value="21">Option 21</nb-option>
|
||||
<nb-option value="22">Option 22</nb-option>
|
||||
<nb-option value="23">Option 23</nb-option>
|
||||
<nb-option value="24">Option 24</nb-option>
|
||||
</nb-option-group>
|
||||
|
||||
<nb-option-group title="Group 3">
|
||||
<nb-option value="31">Option 31</nb-option>
|
||||
<nb-option value="32">Option 32</nb-option>
|
||||
<nb-option value="33">Option 33</nb-option>
|
||||
<nb-option value="34">Option 34</nb-option>
|
||||
</nb-option-group>
|
||||
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select Shapes</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select placeholder="Round" shape="round">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Rectangle" shape="rectangle">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Semi-round" shape="semi-round">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select Sizes</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select placeholder="XSmall" size="xsmall">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Small" size="small">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Medium" size="medium">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Large" size="large">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select Statuses</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select placeholder="Primary" status="primary">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Info" status="info">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Danger" status="danger">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Success" status="success">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Warning" status="warning">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Outline Select</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select placeholder="Primary" outline status="primary">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Info" outline status="info">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Danger" outline status="danger">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Success" outline status="success">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Warning" outline status="warning">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-4">
|
||||
<nb-card>
|
||||
<nb-card-header>Select Colors</nb-card-header>
|
||||
<nb-card-body class="select-group">
|
||||
<nb-select placeholder="Primary" hero status="primary">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Info" hero status="info">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Danger" hero status="danger">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Success" hero status="success">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
|
||||
<nb-select placeholder="Warning" hero status="warning">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
<nb-option value="3">Option 3</nb-option>
|
||||
<nb-option value="4">Option 4</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-select {
|
||||
display: block;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.select-group {
|
||||
nb-select {
|
||||
margin-right: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-nebular-select',
|
||||
templateUrl: 'nebular-select.component.html',
|
||||
styleUrls: ['nebular-select.component.scss'],
|
||||
})
|
||||
export class NebularSelectComponent {
|
||||
|
||||
commonSelectedItem = '2';
|
||||
selectedItem;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<div class="infinite-cards row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card class="own-scroll">
|
||||
<nb-card-header>Own Scroll</nb-card-header>
|
||||
<nb-list
|
||||
nbInfiniteList
|
||||
[threshold]="500"
|
||||
(bottomThreshold)="loadNext(firstCard)">
|
||||
<nb-list-item *ngFor="let newsPost of firstCard.news">
|
||||
<ngx-news-post [post]="newsPost"></ngx-news-post>
|
||||
</nb-list-item>
|
||||
<nb-list-item *ngFor="let _ of firstCard.placeholders">
|
||||
<ngx-news-post-placeholder></ngx-news-post-placeholder>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Window Scroll</nb-card-header>
|
||||
<nb-list
|
||||
nbInfiniteList
|
||||
listenWindowScroll
|
||||
[threshold]="500"
|
||||
(bottomThreshold)="loadNext(secondCard)">
|
||||
<nb-list-item *ngFor="let newsPost of secondCard.news">
|
||||
<ngx-news-post [post]="newsPost"></ngx-news-post>
|
||||
</nb-list-item>
|
||||
<nb-list-item *ngFor="let _ of secondCard.placeholders">
|
||||
<ngx-news-post-placeholder></ngx-news-post-placeholder>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.infinite-cards {
|
||||
nb-card {
|
||||
&.own-scroll {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NewsService } from '../services/news.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-infinite-list',
|
||||
templateUrl: 'infinite-list.component.html',
|
||||
styleUrls: ['infinite-list.component.scss'],
|
||||
})
|
||||
export class InfiniteListComponent {
|
||||
|
||||
|
||||
firstCard = {
|
||||
news: [],
|
||||
placeholders: [],
|
||||
loading: false,
|
||||
pageToLoadNext: 1,
|
||||
};
|
||||
secondCard = {
|
||||
news: [],
|
||||
placeholders: [],
|
||||
loading: false,
|
||||
pageToLoadNext: 1,
|
||||
};
|
||||
pageSize = 10;
|
||||
|
||||
constructor(private newsService: NewsService) {}
|
||||
|
||||
loadNext(cardData) {
|
||||
if (cardData.loading) { return; }
|
||||
|
||||
cardData.loading = true;
|
||||
cardData.placeholders = new Array(this.pageSize);
|
||||
this.newsService.load(cardData.pageToLoadNext, this.pageSize)
|
||||
.subscribe(nextNews => {
|
||||
cardData.placeholders = [];
|
||||
cardData.news.push(...nextNews);
|
||||
cardData.loading = false;
|
||||
cardData.pageToLoadNext++;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="title-placeholder"></div>
|
||||
<div class="text-placeholder"></div>
|
||||
<div class="link-placeholder"></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: block;
|
||||
|
||||
.title-placeholder {
|
||||
height: 1.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.text-placeholder {
|
||||
height: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.link-placeholder {
|
||||
height: 1.25rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
[class$='placeholder'] {
|
||||
background: rgba(nb-theme(layout-bg), 0.6);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component, HostBinding } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-news-post-placeholder',
|
||||
templateUrl: 'news-post-placeholder.component.html',
|
||||
styleUrls: ['news-post-placeholder.component.scss'],
|
||||
})
|
||||
export class NewsPostPlaceholderComponent {
|
||||
|
||||
@HostBinding('attr.aria-label')
|
||||
label = 'Loading';
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<article>
|
||||
<h2>{{post.title}}</h2>
|
||||
<p>{{post.text}}</p>
|
||||
<a [attr.href]="post.link">Read full article</a>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NewsPost } from '../../services/news.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-news-post',
|
||||
templateUrl: 'news-post.component.html',
|
||||
})
|
||||
export class NewsPostComponent {
|
||||
|
||||
@Input() post: NewsPost;
|
||||
}
|
||||
13
src/app/pages/extra-components/list/fruits-list.ts
Normal file
13
src/app/pages/extra-components/list/fruits-list.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export const fruits: string[] = [
|
||||
'Lemons',
|
||||
'Raspberries',
|
||||
'Strawberries',
|
||||
'Blackberries',
|
||||
'Kiwis',
|
||||
'Grapefruit',
|
||||
'Avocado',
|
||||
'Watermelon',
|
||||
'Cantaloupe',
|
||||
'Oranges',
|
||||
'Peaches',
|
||||
];
|
||||
26
src/app/pages/extra-components/list/list.component.html
Normal file
26
src/app/pages/extra-components/list/list.component.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<div class="lists row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card class="list-card">
|
||||
<nb-card-header>Some Fruits</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-list>
|
||||
<nb-list-item *ngFor="let fruit of fruits">
|
||||
{{ fruit }}
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card class="list-card" size="small">
|
||||
<nb-card-header>Users</nb-card-header>
|
||||
<nb-list>
|
||||
<nb-list-item *ngFor="let user of users">
|
||||
<nb-user [name]="user.name" [title]="user.title">
|
||||
</nb-user>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
13
src/app/pages/extra-components/list/list.component.scss
Normal file
13
src/app/pages/extra-components/list/list.component.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.list-card {
|
||||
nb-card-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/app/pages/extra-components/list/list.component.ts
Normal file
19
src/app/pages/extra-components/list/list.component.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { fruits } from './fruits-list';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-list',
|
||||
templateUrl: 'list.component.html',
|
||||
styleUrls: ['list.component.scss'],
|
||||
})
|
||||
export class ListComponent {
|
||||
fruits = fruits;
|
||||
|
||||
users: { name: string, title: string }[] = [
|
||||
{ name: 'Carla Espinosa', title: 'Nurse' },
|
||||
{ name: 'Bob Kelso', title: 'Doctor of Medicine' },
|
||||
{ name: 'Janitor', title: 'Janitor' },
|
||||
{ name: 'Perry Cox', title: 'Doctor of Medicine' },
|
||||
{ name: 'Ben Sullivan', title: 'Carpenter and photographer' },
|
||||
];
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nb-progress-bar {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-progress-bar ~ nb-progress-bar {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
30
src/app/pages/extra-components/services/news.service.ts
Normal file
30
src/app/pages/extra-components/services/news.service.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { delay, map } from 'rxjs/operators';
|
||||
|
||||
const TOTAL_PAGES = 7;
|
||||
|
||||
export class NewsPost {
|
||||
title: string;
|
||||
link: string;
|
||||
creator: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class NewsService {
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
load(page: number, pageSize: number): Observable<NewsPost[]> {
|
||||
const startIndex = ((page - 1) % TOTAL_PAGES) * pageSize;
|
||||
|
||||
return this.http
|
||||
.get<NewsPost[]>('assets/data/news.json')
|
||||
.pipe(
|
||||
map(news => news.splice(startIndex, pageSize)),
|
||||
delay(1500),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue