mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-18 23:36:11 +01:00
nebular update and structure refactoring
This commit is contained in:
Dmitry Nehaychik
parent
78e4d2cfe9
commit
df489ad17e
100 changed files with 736 additions and 3945 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', { static: true }) accordion;
|
||||
|
||||
toggle() {
|
||||
this.accordion.toggle();
|
||||
}
|
||||
}
|
||||
|
|
@ -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,9 @@
|
|||
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';
|
||||
|
|
@ -20,26 +15,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 +35,15 @@ const COMPONENTS = [
|
|||
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({
|
||||
|
|
@ -84,8 +53,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' },
|
||||
];
|
||||
}
|
||||
|
|
@ -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,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() {
|
||||
::ng-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);
|
||||
}
|
||||
|
||||
::ng-deep ngx-tab1, ::ng-deep ngx-tab2 {
|
||||
display: block;
|
||||
padding: nb-theme(padding);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
nb-tabset ::ng-deepul {
|
||||
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() {
|
||||
|
||||
::ng-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