mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-19 06:28:06 +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,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 {
|
||||
}
|
||||
10
src/app/pages/extra-components/extra-components.component.ts
Normal file
10
src/app/pages/extra-components/extra-components.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-components',
|
||||
template: `
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
143
src/app/pages/extra-components/stepper/stepper.component.html
Normal file
143
src/app/pages/extra-components/stepper/stepper.component.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<nb-card class="col-md-12 col-lg-12 col-xxxl-12">
|
||||
<nb-card-body>
|
||||
<nb-stepper orientation="horizontal">
|
||||
<nb-step [label]="labelOne">
|
||||
<ng-template #labelOne>First step</ng-template>
|
||||
<h3>Step content #1</h3>
|
||||
<button nbButton disabled nbStepperNext>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step [label]="labelTwo">
|
||||
<ng-template #labelTwo>Second step</ng-template>
|
||||
<h3>Step content #2</h3>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Third step">
|
||||
<h3>Step content #3</h3>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step [label]="labelFour">
|
||||
<ng-template #labelFour>Fourth step</ng-template>
|
||||
<h3>Step content #4</h3>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton disabled nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<div class="steppers-container row">
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<nb-stepper #stepper>
|
||||
<nb-step [stepControl]="firstForm" label="First step">
|
||||
<form [formGroup]="firstForm" (ngSubmit)="onFirstSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle,
|
||||
my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
|
||||
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
|
||||
</div>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="secondForm" label="Second step">
|
||||
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Pellentesque we gonna chung tortor.
|
||||
Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor.
|
||||
Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
|
||||
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
|
||||
</div>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="thirdForm" label="Third step">
|
||||
<form [formGroup]="thirdForm" (ngSubmit)="onThirdSubmit()" class="step-container">
|
||||
<p class="lorem">
|
||||
Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
|
||||
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
|
||||
</div>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>Confirm</button>
|
||||
</form>
|
||||
</nb-step>
|
||||
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
|
||||
<div class="step-container">
|
||||
<h3>Wizard completed!</h3>
|
||||
<button nbButton (click)="stepper.reset()">Try again</button>
|
||||
</div>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-card size="medium">
|
||||
<nb-card-body>
|
||||
<nb-stepper orientation="vertical">
|
||||
<nb-step label="First step">
|
||||
<h3>Step content #1</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||
placerat quis, lobortis in ligula.
|
||||
</p>
|
||||
<button nbButton disabled nbStepperNext>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Second step">
|
||||
<h3>Step content #2</h3>
|
||||
<p class="lorem">
|
||||
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||
</p>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Third step">
|
||||
<h3>Step content #3</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||
placerat quis, lobortis in ligula.
|
||||
</p>
|
||||
<p class="lorem">
|
||||
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||
</p>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Fourth step">
|
||||
<h3>Step content #4</h3>
|
||||
<p class="lorem">
|
||||
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||
viverra ex.
|
||||
</p>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton disabled nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ nb-stepper .step-content {
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/app/pages/extra-components/stepper/stepper.component.ts
Normal file
43
src/app/pages/extra-components/stepper/stepper.component.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-stepper',
|
||||
templateUrl: 'stepper.component.html',
|
||||
styleUrls: ['stepper.component.scss'],
|
||||
})
|
||||
export class StepperComponent implements OnInit {
|
||||
|
||||
firstForm: FormGroup;
|
||||
secondForm: FormGroup;
|
||||
thirdForm: FormGroup;
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.firstForm = this.fb.group({
|
||||
firstCtrl: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.secondForm = this.fb.group({
|
||||
secondCtrl: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.thirdForm = this.fb.group({
|
||||
thirdCtrl: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
onFirstSubmit() {
|
||||
this.firstForm.markAsDirty();
|
||||
}
|
||||
|
||||
onSecondSubmit() {
|
||||
this.secondForm.markAsDirty();
|
||||
}
|
||||
|
||||
onThirdSubmit() {
|
||||
this.thirdForm.markAsDirty();
|
||||
}
|
||||
}
|
||||
40
src/app/pages/extra-components/tabs/tabs.component.html
Normal file
40
src/app/pages/extra-components/tabs/tabs.component.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nb-card size="small">
|
||||
<nb-tabset>
|
||||
<nb-tab tabTitle="Simple Tab #1">
|
||||
<p>In 1975, the first general purpose home automation network technology, <a target="_blank" href="https://en.wikipedia.org/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, was developed. It is a communication protocol for electronic devices. It primarily uses <a target="_blank" href="https://en.wikipedia.org/wiki/Electric_power_transmission" title="Electric power transmission">electric power transmission</a> wiring for signalling and control, where the signals involve brief <a target="_blank" href="https://en.wikipedia.org/wiki/Radio_frequency" title="Radio frequency">radio frequency</a> bursts of <a target="_blank" href="https://en.wikipedia.org/wiki/Digital_data" title="Digital data">digital data</a>, and remains the most widely available.<sup id="cite_ref-8" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-8">[8]</a></sup> By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.</p>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #2">
|
||||
<span>Content #2</span>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Simple Tab #3">
|
||||
<span>Content #3</span>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nb-card size="small">
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab tabTitle="Full width tab #1">
|
||||
<p><b>Home automation</b> or <b>smart home</b><sup id="cite_ref-Smart_Home_1-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-Smart_Home-1">[1]</a></sup> (also known as <b>domotics</b><sup id="cite_ref-t3_2-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-t3-2">[2]</a></sup>) is <a target="_blank" href="https://en.wikipedia.org/wiki/Building_automation" title="Building automation">building automation</a> for the home. It involves the control and automation of lighting, heating (such as <a target="_blank" href="https://en.wikipedia.org/wiki/Smart_thermostat" title="Smart thermostat">smart thermostats</a>), ventilation, air conditioning (<a target="_blank" href="https://en.wikipedia.org/wiki/HVAC" title="HVAC">HVAC</a>), and security, as well as <a target="_blank" href="https://en.wikipedia.org/wiki/Home_appliance" title="Home appliance">home appliances</a> such as washer/dryers, ovens or refrigerators/freezers. <a target="_blank" href="https://en.wikipedia.org/wiki/Wi-Fi" title="Wi-Fi">Wi-Fi</a> is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the <a target="_blank" href="https://en.wikipedia.org/wiki/Internet_of_Things" class="mw-redirect" title="Internet of Things">Internet of Things</a>. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a <a target="_blank" href="https://en.wikipedia.org/wiki/User_interface" title="User interface">user interface</a> that is interacted either with a wall-mounted terminal, mobile phone software, <a target="_blank" href="https://en.wikipedia.org/wiki/Tablet_computer" title="Tablet computer">tablet computer</a> or a web interface, often but not always via Internet cloud services.</p>
|
||||
<p>While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.<sup id="cite_ref-3" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-3">[3]</a></sup> Popular <a target="_blank" href="https://en.wikipedia.org/wiki/Communications_protocol" title="Communications protocol">communications protocol</a> for products include <a target="_blank" href="https://en.wikipedia.org/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/Ethernet" title="Ethernet">Ethernet</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/RS-485" title="RS-485">RS-485</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/6LoWPAN" title="6LoWPAN">6LoWPAN</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/Bluetooth_low_energy" class="mw-redirect" title="Bluetooth low energy">Bluetooth LE (BLE)</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/ZigBee" class="mw-redirect" title="ZigBee">ZigBee</a> and <a target="_blank" href="https://en.wikipedia.org/wiki/Z-Wave" title="Z-Wave">Z-Wave</a>, or other proprietary protocols all of which are incompatible with each other.<sup id="cite_ref-crhomephone_4-0" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-crhomephone-4">[4]</a></sup> Manufacturers often prevent independent implementations by withholding documentation and by litigation.<sup id="cite_ref-5" class="reference"><a target="_blank" href="https://en.wikipedia.org#cite_note-5">[5]</a></sup></p>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #2">
|
||||
<span>Content #2</span>
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="Full width tab #3">
|
||||
<span>Content #3</span>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<nb-card size="small">
|
||||
<nb-route-tabset [tabs]="tabs"></nb-route-tabset>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
27
src/app/pages/extra-components/tabs/tabs.component.scss
Normal file
27
src/app/pages/extra-components/tabs/tabs.component.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
/deep/ ngx-tab1, /deep/ ngx-tab2 {
|
||||
display: block;
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
nb-tabset /deep/ul {
|
||||
font-size: 1rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/app/pages/extra-components/tabs/tabs.component.ts
Normal file
43
src/app/pages/extra-components/tabs/tabs.component.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tab1',
|
||||
template: `
|
||||
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
|
||||
<a target="_blank" href="https://en.wikipedia.org/wiki/Home_appliances">home appliances</a>
|
||||
became viable in the 1900s with the introduction of
|
||||
<a target="_blank" href="https://en.wikipedia.org/wiki/Electric_power_distribution">electric power distribution
|
||||
</a> and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
|
||||
dishwashers, and clothes dryers.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
export class Tab1Component { }
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tab2',
|
||||
template: `
|
||||
<p>Tab 2 works!</p>
|
||||
`,
|
||||
})
|
||||
export class Tab2Component { }
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tabs',
|
||||
styleUrls: ['./tabs.component.scss'],
|
||||
templateUrl: './tabs.component.html',
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
tabs: any[] = [
|
||||
{
|
||||
title: 'Route tab #1',
|
||||
route: '/pages/extra-components/tabs/tab1',
|
||||
},
|
||||
{
|
||||
title: 'Route tab #2',
|
||||
route: '/pages/extra-components/tabs/tab2',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
10
src/app/pages/extra-components/tree/tree.component.html
Normal file
10
src/app/pages/extra-components/tree/tree.component.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Tree</nb-card-header>
|
||||
<nb-card-body>
|
||||
<tree-root [nodes]="nodes"></tree-root>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
20
src/app/pages/extra-components/tree/tree.component.scss
Normal file
20
src/app/pages/extra-components/tree/tree.component.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
/deep/ .angular-tree-component {
|
||||
cursor: default;
|
||||
|
||||
.node-wrapper {
|
||||
.node-content-wrapper {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.toggle-children-wrapper {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/app/pages/extra-components/tree/tree.component.ts
Normal file
33
src/app/pages/extra-components/tree/tree.component.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-tree',
|
||||
templateUrl: './tree.component.html',
|
||||
styleUrls: ['./tree.component.scss'],
|
||||
})
|
||||
export class TreeComponent {
|
||||
|
||||
nodes = [{
|
||||
name: 'Programming languages by programming paradigm',
|
||||
children: [{
|
||||
name: 'Object-oriented programming',
|
||||
children: [{
|
||||
name: 'Java',
|
||||
}, {
|
||||
name: 'C++',
|
||||
}, {
|
||||
name: 'C#',
|
||||
}],
|
||||
}, {
|
||||
name: 'Prototype-based programming',
|
||||
children: [{
|
||||
name: 'JavaScript',
|
||||
}, {
|
||||
name: 'CoffeeScript',
|
||||
}, {
|
||||
name: 'Lua',
|
||||
}],
|
||||
}],
|
||||
}];
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue