mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-06 16:41:48 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -1,82 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -3,13 +3,11 @@
|
|||
<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="success">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-alert status="danger">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
@ -18,13 +16,11 @@
|
|||
<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="success">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-alert outline="danger">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
@ -33,13 +29,11 @@
|
|||
<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="success" accent="danger">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-alert status="danger" accent="primary">You have been successfully authenticated!</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="row">
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
<div class="calendars">
|
||||
<div class="calendar-container">
|
||||
<span class="subtitle">
|
||||
Selected date: {{ date | date }}
|
||||
</h2>
|
||||
</span>
|
||||
<nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar>
|
||||
</div>
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
<div class="calendar-container">
|
||||
<span class="subtitle">
|
||||
Selected range: {{ range.start | date }} - {{ range.end | date }}
|
||||
</h2>
|
||||
</span>
|
||||
<nb-calendar-range [(range)]="range"></nb-calendar-range>
|
||||
</div>
|
||||
<div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
|
||||
<h2>
|
||||
<div class="calendar-container">
|
||||
<span class="subtitle">
|
||||
Selected date: {{ date2 | date }}
|
||||
</h2>
|
||||
</span>
|
||||
<nb-calendar
|
||||
[(date)]="date2"
|
||||
[dayCellComponent]="dayCellComponent"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,46 @@
|
|||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@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 {
|
||||
.calendars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
flex-wrap: wrap;
|
||||
margin: -1rem -0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-family: nb-theme(text-subtitle-font-family);
|
||||
font-size: nb-theme(text-subtitle-font-size);
|
||||
font-weight: nb-theme(text-subtitle-font-weight);
|
||||
line-height: nb-theme(text-subtitle-line-height);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.calendars {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.calendars {
|
||||
margin: -1.1rem;
|
||||
}
|
||||
.calendar-container {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxxl) {
|
||||
.calendars {
|
||||
margin: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,2 @@
|
|||
<div>
|
||||
<div>{{ day }}</div>
|
||||
<span>{{ (day + 100) * day }}$</span>
|
||||
</div>
|
||||
<div>{{ day }}</div>
|
||||
<span class="caption">{{ (day + 100) * day }}$</span>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,18 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-size: 75%;
|
||||
opacity: 0.75;
|
||||
.caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.selected .caption,
|
||||
&:hover .caption {
|
||||
color: nb-theme(text-control-color);
|
||||
}
|
||||
|
||||
&.bounding-month .caption {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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 title="Nebular Conversational UI" size="large" status="primary">
|
||||
<nb-chat-message *ngFor="let msg of messages"
|
||||
[type]="msg.type"
|
||||
[message]="msg.text"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ nb-layout-column {
|
||||
::ng-deep nb-layout-column {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
.chat-container {
|
||||
margin-bottom: 2rem;
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
|
||||
li {
|
||||
padding-top: 1rem;
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
}
|
||||
|
||||
.chart-description {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 52%;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export const messages = [
|
|||
files: [
|
||||
{
|
||||
url: 'https://i.gifer.com/no.gif',
|
||||
icon: 'nb-compose',
|
||||
icon: 'file-text-outline',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
|
|
|
|||
|
|
@ -2,18 +2,11 @@ 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 = [{
|
||||
|
|
@ -24,26 +17,6 @@ const routes: Routes = [{
|
|||
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,
|
||||
|
|
@ -56,29 +29,6 @@ const routes: Routes = [{
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,25 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { TreeModule } from 'angular-tree-component';
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbAlertModule,
|
||||
NbButtonModule,
|
||||
NbCalendarKitModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarRangeModule,
|
||||
NbCardModule,
|
||||
NbChatModule,
|
||||
NbIconModule,
|
||||
NbProgressBarModule,
|
||||
NbSelectModule,
|
||||
NbSpinnerModule,
|
||||
NbTabsetModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
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';
|
||||
|
|
@ -20,26 +31,15 @@ import {
|
|||
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,
|
||||
|
|
@ -51,30 +51,28 @@ const COMPONENTS = [
|
|||
CalendarComponent,
|
||||
DayCellComponent,
|
||||
ChatComponent,
|
||||
TabsComponent,
|
||||
Tab1Component,
|
||||
Tab2Component,
|
||||
StepperComponent,
|
||||
ListComponent,
|
||||
InfiniteListComponent,
|
||||
NewsPostComponent,
|
||||
NewsPostPlaceholderComponent,
|
||||
AccordionComponent,
|
||||
NebularFormInputsComponent,
|
||||
NebularSelectComponent,
|
||||
CalendarKitFullCalendarShowcaseComponent,
|
||||
CalendarKitMonthCellComponent,
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
NewsService,
|
||||
];
|
||||
|
||||
const MODULES = [
|
||||
NbAlertModule,
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarKitModule,
|
||||
NbCalendarRangeModule,
|
||||
NbCardModule,
|
||||
NbChatModule,
|
||||
NbIconModule,
|
||||
NbProgressBarModule,
|
||||
NbSelectModule,
|
||||
NbSpinnerModule,
|
||||
NbTabsetModule,
|
||||
ThemeModule,
|
||||
ExtraComponentsRoutingModule,
|
||||
TreeModule,
|
||||
ToasterModule.forRoot(),
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -84,8 +82,5 @@ const MODULES = [
|
|||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
providers: [
|
||||
...SERVICES,
|
||||
],
|
||||
})
|
||||
export class ExtraComponentsModule { }
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.infinite-cards {
|
||||
nb-card {
|
||||
&.own-scroll {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
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++;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="title-placeholder"></div>
|
||||
<div class="text-placeholder"></div>
|
||||
<div class="link-placeholder"></div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
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';
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<article>
|
||||
<h2>{{post.title}}</h2>
|
||||
<p>{{post.text}}</p>
|
||||
<a [attr.href]="post.link">Read full article</a>
|
||||
</article>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
export const fruits: string[] = [
|
||||
'Lemons',
|
||||
'Raspberries',
|
||||
'Strawberries',
|
||||
'Blackberries',
|
||||
'Kiwis',
|
||||
'Grapefruit',
|
||||
'Avocado',
|
||||
'Watermelon',
|
||||
'Cantaloupe',
|
||||
'Oranges',
|
||||
'Peaches',
|
||||
];
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.list-card {
|
||||
nb-card-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
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' },
|
||||
];
|
||||
}
|
||||
|
|
@ -2,13 +2,13 @@
|
|||
<nb-card-header>Progress Bar Interactive</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="container">
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="nb-arrow-down" (click)="setValue(value - 25)"></nb-action>
|
||||
</nb-actions>
|
||||
<button nbButton appearance="ghost" [disabled]="canDecrease ? null : ''" (click)="decreaseValue()">
|
||||
<nb-icon icon="minus" pack="eva"></nb-icon>
|
||||
</button>
|
||||
<nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="nb-arrow-up" (click)="setValue(value + 25)"></nb-action>
|
||||
</nb-actions>
|
||||
<button nbButton appearance="ghost" [disabled]="canIncrease ? null : ''" (click)="increaseValue()">
|
||||
<nb-icon icon="plus" pack="eva"></nb-icon>
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -8,5 +8,6 @@
|
|||
|
||||
nb-progress-bar {
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,6 @@ export class InteractiveProgressBarComponent {
|
|||
|
||||
value = 25;
|
||||
|
||||
setValue(newValue) {
|
||||
this.value = Math.min(Math.max(newValue, 0), 100);
|
||||
}
|
||||
|
||||
get status() {
|
||||
if (this.value <= 25) {
|
||||
return 'danger';
|
||||
|
|
@ -24,4 +20,24 @@ export class InteractiveProgressBarComponent {
|
|||
return 'success';
|
||||
}
|
||||
}
|
||||
|
||||
get canIncrease(): boolean {
|
||||
return this.value < 100;
|
||||
}
|
||||
|
||||
get canDecrease(): boolean {
|
||||
return this.value > 0;
|
||||
}
|
||||
|
||||
decreaseValue() {
|
||||
if (this.value > 0) {
|
||||
this.value -= 25;
|
||||
}
|
||||
}
|
||||
|
||||
increaseValue() {
|
||||
if (this.value < 100) {
|
||||
this.value += 25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Status</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="20" status="primary">primary</nb-progress-bar>
|
||||
<nb-progress-bar [value]="40" status="info">info</nb-progress-bar>
|
||||
<nb-progress-bar [value]="60" status="success">success</nb-progress-bar>
|
||||
<nb-progress-bar [value]="80" status="warning">warning</nb-progress-bar>
|
||||
<nb-progress-bar [value]="100" status="danger">danger</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<ngx-interactive-progress-bar></ngx-interactive-progress-bar>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Size</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="20" size="xs">xs</nb-progress-bar>
|
||||
<nb-progress-bar [value]="40" size="sm">sm</nb-progress-bar>
|
||||
<nb-progress-bar [value]="60">none</nb-progress-bar>
|
||||
<nb-progress-bar [value]="80" size="lg">lg</nb-progress-bar>
|
||||
<nb-progress-bar [value]="100" size="xlg">xlg</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Status</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="20" status="primary">primary</nb-progress-bar>
|
||||
<nb-progress-bar [value]="40" status="info">info</nb-progress-bar>
|
||||
<nb-progress-bar [value]="60" status="success">success</nb-progress-bar>
|
||||
<nb-progress-bar [value]="80" status="warning">warning</nb-progress-bar>
|
||||
<nb-progress-bar [value]="100" status="danger">danger</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Value</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="40" status="primary" [displayValue]="true"></nb-progress-bar>
|
||||
<nb-progress-bar [value]="60" status="primary">Custom value</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<ngx-interactive-progress-bar></ngx-interactive-progress-bar>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Size</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="20" size="tiny">tiny</nb-progress-bar>
|
||||
<nb-progress-bar [value]="40" size="small">small</nb-progress-bar>
|
||||
<nb-progress-bar [value]="60" size="medium">medium (default)</nb-progress-bar>
|
||||
<nb-progress-bar [value]="80" size="large">large</nb-progress-bar>
|
||||
<nb-progress-bar [value]="100" size="giant">giant</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Progress Bar Value</nb-card-header>
|
||||
<nb-card-body>
|
||||
<nb-progress-bar [value]="40" status="primary" [displayValue]="true"></nb-progress-bar>
|
||||
<nb-progress-bar [value]="60" status="primary">Custom text</nb-progress-bar>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
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),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,4 @@
|
|||
<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 [nbSpinner]="true" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
|
|
@ -34,7 +16,13 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerStatus="primary">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</button>
|
||||
|
||||
<button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="xsmall" nbSpinnerMessage="">
|
||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
button {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.size-medium-group {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
border-top: 1px solid nb-theme(divider-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nb-card size="xsmall">
|
||||
<nb-card-body>
|
||||
<nb-tabset fullWidth (changeTab)="toggleLoadingAnimation()">
|
||||
<nb-tab tabTitle="Tab 1" [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="xxlarge">
|
||||
<nb-tab tabTitle="Tab 1" [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="giant">
|
||||
<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">
|
||||
<nb-tab tabTitle="Tab 2" [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="giant">
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -1,40 +1,28 @@
|
|||
<nb-card [nbSpinner]="true" nbSpinnerSize="xxsmall">
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="tiny" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="xsmall">
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="small" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="small">
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="medium" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="medium">
|
||||
<nb-card [nbSpinner]="true" nbSpinnerSize="large" nbSpinnerStatus="primary">
|
||||
<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 [nbSpinner]="true" nbSpinnerSize="giant" nbSpinnerStatus="primary">
|
||||
<nb-card-body>
|
||||
Some card content.
|
||||
</nb-card-body>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
/deep/ nb-spinner {
|
||||
::ng-deep nb-spinner {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,143 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ nb-stepper .step-content {
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
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',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
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