Initial CoreUI commit
The initial new codebase from a template
This commit is contained in:
piratefinn
parent
39f90b1897
commit
6f084171dd
511 changed files with 27578 additions and 1649 deletions
0
src/app/app.component.html
Normal file
0
src/app/app.component.html
Normal file
32
src/app/app.component.spec.ts
Normal file
32
src/app/app.component.spec.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'app works!'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app works!');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('app works!');
|
||||
}));
|
||||
});
|
||||
8
src/app/app.component.ts
Normal file
8
src/app/app.component.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line
|
||||
selector: 'body',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
export class AppComponent { }
|
||||
45
src/app/app.module.ts
Normal file
45
src/app/app.module.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
|
||||
import { AsideToggleDirective } from './shared/aside.directive';
|
||||
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
|
||||
|
||||
// Routing Module
|
||||
import { AppRoutingModule } from './app.routing';
|
||||
|
||||
// Layouts
|
||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
TabsModule.forRoot(),
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
FullLayoutComponent,
|
||||
SimpleLayoutComponent,
|
||||
NAV_DROPDOWN_DIRECTIVES,
|
||||
BreadcrumbsComponent,
|
||||
SIDEBAR_TOGGLE_DIRECTIVES,
|
||||
AsideToggleDirective,
|
||||
],
|
||||
providers: [{
|
||||
provide: LocationStrategy,
|
||||
useClass: HashLocationStrategy
|
||||
}],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
62
src/app/app.routing.ts
Normal file
62
src/app/app.routing.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
// Layouts
|
||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'dashboard',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: FullLayoutComponent,
|
||||
data: {
|
||||
title: 'Home'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
loadChildren: './dashboard/dashboard.module#DashboardModule'
|
||||
},
|
||||
{
|
||||
path: 'components',
|
||||
loadChildren: './components/components.module#ComponentsModule'
|
||||
},
|
||||
{
|
||||
path: 'icons',
|
||||
loadChildren: './icons/icons.module#IconsModule'
|
||||
},
|
||||
{
|
||||
path: 'widgets',
|
||||
loadChildren: './widgets/widgets.module#WidgetsModule'
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
loadChildren: './chartjs/chartjs.module#ChartJSModule'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'pages',
|
||||
component: SimpleLayoutComponent,
|
||||
data: {
|
||||
title: 'Pages'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadChildren: './pages/pages.module#PagesModule',
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forRoot(routes) ],
|
||||
exports: [ RouterModule ]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ChartJSComponent,
|
||||
data: {
|
||||
title: 'Charts'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChartJSRoutingModule {}
|
||||
130
src/app/chartjs/chartjs.component.html
Normal file
130
src/app/chartjs/chartjs.component.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card-columns cols-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Line Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[colors]="lineChartColours"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Bar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
[chartType]="barChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Doughnut Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartData"
|
||||
[labels]="doughnutChartLabels"
|
||||
[chartType]="doughnutChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Radar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="radarChartData"
|
||||
[labels]="radarChartLabels"
|
||||
[chartType]="radarChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pie Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Polar Area Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="polarAreaChartData"
|
||||
[labels]="polarAreaChartLabels"
|
||||
[legend]="polarAreaLegend"
|
||||
[chartType]="polarAreaChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
97
src/app/chartjs/chartjs.component.ts
Normal file
97
src/app/chartjs/chartjs.component.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'chartjs.component.html'
|
||||
})
|
||||
export class ChartJSComponent {
|
||||
|
||||
// lineChart
|
||||
public lineChartData: Array<any> = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
|
||||
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
|
||||
];
|
||||
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
},
|
||||
{ // dark grey
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||
},
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}
|
||||
];
|
||||
public lineChartLegend = true;
|
||||
public lineChartType = 'line';
|
||||
|
||||
// barChart
|
||||
public barChartOptions: any = {
|
||||
scaleShowVerticalLines: false,
|
||||
responsive: true
|
||||
};
|
||||
public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
public barChartType = 'bar';
|
||||
public barChartLegend = true;
|
||||
|
||||
public barChartData: any[] = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
|
||||
];
|
||||
|
||||
// Doughnut
|
||||
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
public doughnutChartData: number[] = [350, 450, 100];
|
||||
public doughnutChartType = 'doughnut';
|
||||
|
||||
// Radar
|
||||
public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
|
||||
public radarChartData: any = [
|
||||
{data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B'}
|
||||
];
|
||||
public radarChartType = 'radar';
|
||||
|
||||
// Pie
|
||||
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
public pieChartData: number[] = [300, 500, 100];
|
||||
public pieChartType = 'pie';
|
||||
|
||||
// PolarArea
|
||||
public polarAreaChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
public polarAreaChartData: number[] = [300, 500, 100, 40, 120];
|
||||
public polarAreaLegend = true;
|
||||
|
||||
public polarAreaChartType = 'polarArea';
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
14
src/app/chartjs/chartjs.module.ts
Normal file
14
src/app/chartjs/chartjs.module.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
import { ChartJSRoutingModule } from './chartjs-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ChartJSRoutingModule,
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [ ChartJSComponent ]
|
||||
})
|
||||
export class ChartJSModule { }
|
||||
231
src/app/components/buttons.component.html
Normal file
231
src/app/components/buttons.component.html
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
<button type="button" class="btn btn-link"><i class="fa fa-link"></i> Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-lg">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-sm">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-sm">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
|
||||
<button type="button" class="btn btn-link" disabled="disabled">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-success active">Success</button>
|
||||
<button type="button" class="btn btn-info active">Info</button>
|
||||
<button type="button" class="btn btn-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-danger active">Danger</button>
|
||||
<button type="button" class="btn btn-link active">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-link btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<!-- Secondary, outline button -->
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-outline-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger" disabled="disabled">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success active">Success</button>
|
||||
<button type="button" class="btn btn-outline-info active">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger active">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/buttons.component.ts
Normal file
10
src/app/components/buttons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'buttons.component.html'
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
320
src/app/components/cards.component.html
Normal file
320
src/app/components/cards.component.html
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="card-footer">Card footer</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-check"></i>Card with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-success float-right">Success</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-primary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-secondary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-success">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-info">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-warning">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-danger">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-primary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-secondary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-success">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-info">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-warning">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-danger">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/cards.component.ts
Normal file
10
src/app/components/cards.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'cards.component.html'
|
||||
})
|
||||
export class CardsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
84
src/app/components/components-routing.module.ts
Normal file
84
src/app/components/components-routing.module.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Components'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
data: {
|
||||
title: 'Buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'cards',
|
||||
component: CardsComponent,
|
||||
data: {
|
||||
title: 'Cards'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: FormsComponent,
|
||||
data: {
|
||||
title: 'Forms'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
data: {
|
||||
title: 'Modals'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'social-buttons',
|
||||
component: SocialButtonsComponent,
|
||||
data: {
|
||||
title: 'Social buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'switches',
|
||||
component: SwitchesComponent,
|
||||
data: {
|
||||
title: 'Switches'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: TablesComponent,
|
||||
data: {
|
||||
title: 'Tables'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
data: {
|
||||
title: 'Tabs'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ComponentsRoutingModule {}
|
||||
43
src/app/components/components.module.ts
Normal file
43
src/app/components/components.module.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
|
||||
// Forms Component
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
|
||||
// Modal Component
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
|
||||
// Tabs Component
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
// Components Routing
|
||||
import { ComponentsRoutingModule } from './components-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ComponentsRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
ModalModule.forRoot(),
|
||||
TabsModule
|
||||
],
|
||||
declarations: [
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
FormsComponent,
|
||||
ModalsComponent,
|
||||
SocialButtonsComponent,
|
||||
SwitchesComponent,
|
||||
TablesComponent,
|
||||
TabsComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
998
src/app/components/forms.component.html
Normal file
998
src/app/components/forms.component.html
Normal file
|
|
@ -0,0 +1,998 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Credit Card</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="ccnumber">Credit Card Number</label>
|
||||
<input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccmonth">Month</label>
|
||||
<select class="form-control" id="ccmonth">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
<option>10</option>
|
||||
<option>11</option>
|
||||
<option>12</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccyear">Year</label>
|
||||
<select class="form-control" id="ccyear">
|
||||
<option>2014</option>
|
||||
<option>2015</option>
|
||||
<option>2016</option>
|
||||
<option>2017</option>
|
||||
<option>2018</option>
|
||||
<option>2019</option>
|
||||
<option>2020</option>
|
||||
<option>2021</option>
|
||||
<option>2022</option>
|
||||
<option>2023</option>
|
||||
<option>2024</option>
|
||||
<option>2025</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="cvv">CVV/CVC</label>
|
||||
<input type="text" class="form-control" id="cvv" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Company</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" placeholder="Enter your company name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="vat">VAT</label>
|
||||
<input type="text" class="form-control" id="vat" placeholder="PL1234567890">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="street">Street</label>
|
||||
<input type="text" class="form-control" id="street" placeholder="Enter street name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-8">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter your city">
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="postal-code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal-code" placeholder="Postal Code">
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="form-group">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country" placeholder="Country name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Basic Form</strong> Elements
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Static</label>
|
||||
<div class="col-md-9">
|
||||
<p class="form-control-static">Username</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input">Text Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="email-input">Email Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="password-input">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
|
||||
<span class="help-block">Please enter a complex password</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="disabled-input">Disabled Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="textarea-input">Textarea</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Large</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-lg">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Small</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-sm">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Disabled Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="disabledSelect" class="form-control" disabled>
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="multiple-select">Multiple select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
<option value="4">Option #4</option>
|
||||
<option value="5">Option #5</option>
|
||||
<option value="6">Option #6</option>
|
||||
<option value="7">Option #7</option>
|
||||
<option value="8">Option #8</option>
|
||||
<option value="9">Option #9</option>
|
||||
<option value="10">Option #10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Radios</label>
|
||||
<div class="col-md-9">
|
||||
<div class="radio">
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="radios" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio2">
|
||||
<input type="radio" id="radio2" name="radios" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio3">
|
||||
<input type="radio" id="radio3" name="radios" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Radios</label>
|
||||
<div class="col-md-9">
|
||||
<label class="radio-inline" for="inline-radio1">
|
||||
<input type="radio" id="inline-radio1" name="inline-radios" value="option1"> One
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio2">
|
||||
<input type="radio" id="inline-radio2" name="inline-radios" value="option2"> Two
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio3">
|
||||
<input type="radio" id="inline-radio3" name="inline-radios" value="option3"> Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="checkbox">
|
||||
<label for="checkbox1">
|
||||
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox2">
|
||||
<input type="checkbox" id="checkbox2" name="checkbox2" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox3">
|
||||
<input type="checkbox" id="checkbox3" name="checkbox3" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<label class="checkbox-inline" for="inline-checkbox1">
|
||||
<input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1">One
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox2">
|
||||
<input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2">Two
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox3">
|
||||
<input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3">Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-input" name="file-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-multiple-input">Multiple File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Inline</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-email">Email</label>
|
||||
<input type="email" id="if-email" name="if-email" class="form-control" placeholder="Enter Email..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-password">Password</label>
|
||||
<input type="password" id="if-password" name="if-password" class="form-control" placeholder="Enter Password..">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Horizontal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-email">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-password">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Normal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<label for="nf-email">Email</label>
|
||||
<input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nf-password">Password</label>
|
||||
<input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Grid</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Sizes</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-small">Small Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-normal">Normal Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-large">Large Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> with optional icons
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess2">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning2">
|
||||
</div>
|
||||
<div class="form-group has-danger has-feedback">
|
||||
<label class="form-form-control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputError2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-euro"></i></span>
|
||||
<input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder="..">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Buttons</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
|
||||
</span>
|
||||
<input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
|
||||
</span>
|
||||
<input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button type="button" dropdownToggle class="btn btn-primary dropdown-toggle dropdown-toggle-split">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Split button!</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input3-group3" name="input3-group3" class="form-control" placeholder="..">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Use the grid for big devices!
|
||||
<small>
|
||||
<code>.col-lg-*</code>
|
||||
<code>.col-md-*</code>
|
||||
<code>.col-sm-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input Grid for small devices!
|
||||
<small>
|
||||
<code>.col-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Username</span>
|
||||
<input type="text" id="username3" name="username3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Email</span>
|
||||
<input type="email" id="email3" name="email3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Password</span>
|
||||
<input type="password" id="password3" name="password3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="text" id="username2" name="username2" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="email" id="email2" name="email2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="password" id="password2" name="password2" class="form-control" placeholder="Password">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-default">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-success">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-edit"></i>Form Elements
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form class="form-2orizontal">
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text">
|
||||
</div>
|
||||
<p class="help-block">Here's some help text</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInput">Appended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<span class="help-block">Here's more help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedPrependedInput">Append and prepend</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input id="appendedPrependedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButton">Append with button</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButton" class="form-control" size="16" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButtons">Two-button append</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButtons" size="16" class="form-control" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Search</button>
|
||||
<button class="btn btn-default" type="button">Options</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn btn-default" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/forms.component.ts
Normal file
10
src/app/components/forms.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'forms.component.html'
|
||||
})
|
||||
export class FormsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
202
src/app/components/modals.component.html
Normal file
202
src/app/components/modals.component.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="myModal.show()">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="largeModal.show()">
|
||||
Launch large modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
|
||||
Launch small modal
|
||||
</button>
|
||||
<hr>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" (click)="primaryModal.show()">
|
||||
Primary modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" (click)="successModal.show()">
|
||||
Success modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" (click)="warningModal.show()">
|
||||
Warning modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()">
|
||||
Danger modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" (click)="infoModal.show()">
|
||||
Info modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #primaryModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-primary" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="primaryModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="primaryModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #successModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-success" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="successModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-warning" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="warningModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-danger" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-info" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="infoModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="infoModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
16
src/app/components/modals.component.ts
Normal file
16
src/app/components/modals.component.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'modals.component.html'
|
||||
})
|
||||
export class ModalsComponent {
|
||||
public myModal;
|
||||
public largeModal;
|
||||
public smallModal;
|
||||
public primaryModal;
|
||||
public successModal;
|
||||
public warningModal;
|
||||
public dangerModal;
|
||||
public infoModal;
|
||||
}
|
||||
788
src/app/components/social-buttons.component.html
Normal file
788
src/app/components/social-buttons.component.html
Normal file
|
|
@ -0,0 +1,788 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only icons. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook icon" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only text. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook text" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/social-buttons.component.ts
Normal file
10
src/app/components/social-buttons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'social-buttons.component.html'
|
||||
})
|
||||
export class SocialButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
942
src/app/components/switches.component.html
Normal file
942
src/app/components/switches.component.html
Normal file
|
|
@ -0,0 +1,942 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
3d Switch
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-block p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-lg switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-lg</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-sm switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-xs switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/switches.component.ts
Normal file
10
src/app/components/switches.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'switches.component.html'
|
||||
})
|
||||
export class SwitchesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
373
src/app/components/tables.component.html
Normal file
373
src/app/components/tables.component.html
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Simple Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Samppa Nori</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estavan Lykos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chetan Mohamed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Derick Maximinus</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friderik Dávid</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Striped Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Yiorgos Avraamu</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avram Tarasios</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quintin Ed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enéas Kwadwo</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agapetus Tadeáš</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Condensed Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Carwyn Fachtna</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nehemiah Tatius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebbe Gemariah</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eustorgios Amulius</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leopold Gáspár</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bordered Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Pompeius René</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paĉjo Jadon</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Micheal Mercurius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ganesha Dubhghall</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hiroto Šimun</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Combined All Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Vishnu Serghei</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zbyněk Phoibos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Einar Randall</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Félix Troels</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aulus Agmundr</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/tables.component.ts
Normal file
10
src/app/components/tables.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tables.component.html'
|
||||
})
|
||||
export class TablesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
69
src/app/components/tabs.component.html
Normal file
69
src/app/components/tabs.component.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab heading="Home">
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Profile">
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Messages">
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i></ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i></ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator</ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i> Shoping cart</ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i> Menu <span class="badge badge-success">New</span></ng-template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator <span class="badge badge-pill badge-danger">29</span></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/tabs.component.ts
Normal file
10
src/app/components/tabs.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tabs.component.html'
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
21
src/app/dashboard/dashboard-routing.module.ts
Normal file
21
src/app/dashboard/dashboard-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes,
|
||||
RouterModule } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DashboardComponent,
|
||||
data: {
|
||||
title: 'Dashboard'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardRoutingModule {}
|
||||
940
src/app/dashboard/dashboard.component.html
Normal file
940
src/app/dashboard/dashboard.component.html
Normal file
|
|
@ -0,0 +1,940 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart1Data"
|
||||
[labels]="lineChart1Labels"
|
||||
[options]="lineChart1Options"
|
||||
[colors]="lineChart1Colours"
|
||||
[legend]="lineChart1Legend"
|
||||
[chartType]="lineChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block pb-0">
|
||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
||||
<i class="icon-location-pin"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart2Data"
|
||||
[labels]="lineChart2Labels"
|
||||
[options]="lineChart2Options"
|
||||
[colors]="lineChart2Colours"
|
||||
[legend]="lineChart2Legend"
|
||||
[chartType]="lineChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right">
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart3Data"
|
||||
[labels]="lineChart3Labels"
|
||||
[options]="lineChart3Options"
|
||||
[colors]="lineChart3Colours"
|
||||
[legend]="lineChart3Legend"
|
||||
[chartType]="lineChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart1Data"
|
||||
[labels]="barChart1Labels"
|
||||
[options]="barChart1Options"
|
||||
[colors]="barChart1Colours"
|
||||
[legend]="barChart1Legend"
|
||||
[chartType]="barChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2015</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-7 hidden-sm-down">
|
||||
<button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option1"> Day
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary active">
|
||||
<input type="radio" name="options" id="option2" checked> Month
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option3"> Year
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="mainChartData"
|
||||
[labels]="mainChartLabels"
|
||||
[options]="mainChartOptions"
|
||||
[colors]="mainChartColours"
|
||||
[legend]="mainChartLegend"
|
||||
[chartType]="mainChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.card-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData1"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData2"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData3"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData4"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Traffic & Sales
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-info">
|
||||
<small class="text-muted">New Clients</small>
|
||||
<br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartInfo"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-danger">
|
||||
<small class="text-muted">Recuring Clients</small>
|
||||
<br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDanger"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<span class="badge badge-pill badge-info"></span> <small>New clients</small> <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-warning">
|
||||
<small class="text-muted">Pageviews</small>
|
||||
<br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartWarning"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-success">
|
||||
<small class="text-muted">Organic</small>
|
||||
<br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartSuccess"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<i class="icon-user"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="value">43%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user-female"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="value">37%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<i class="icon-globe"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-facebook"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-linkedin"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout">
|
||||
<small class="text-muted">CTR</small>
|
||||
<br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDefault"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-primary">
|
||||
<small class="text-muted">Bounce Rate</small>
|
||||
<br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartPrimary"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="icons-list">
|
||||
<li>
|
||||
<i class="icon-screen-desktop bg-primary"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iMac 4k</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-info"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Samsung Galaxy Edge</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.224</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iPhone 6S</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.163</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Premium accounts</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>928</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-spotify bg-success"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Spotify Subscriptions</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>893</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cloud-download bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Ebook</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Downloads</div>
|
||||
<strong>121.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-camera bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Photos</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Uploaded</div>
|
||||
<strong>12.125</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<br>
|
||||
<div class="table-responsive"></div>
|
||||
<table class="table table-responsive table-hover table-outline mb-0">
|
||||
<thead class="thead-default">
|
||||
<tr>
|
||||
<th class="text-center"><i class="icon-people"></i></th>
|
||||
<th>User</th>
|
||||
<th class="text-center">Country</th>
|
||||
<th>Usage</th>
|
||||
<th class="text-center">Payment Method</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/1.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/USA.png" alt="USA" style="height:24px;" src="assets/img/flags/USA.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>50%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-mastercard" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>10 sec ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/2.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Avram Tarasios</div>
|
||||
<div class="small text-muted">
|
||||
|
||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="assets/img/flags/Brazil.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-visa" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>5 minutes ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/3.jpg">
|
||||
<span class="avatar-status badge-warning"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Quintin Ed</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/India.png" alt="India" style="height:24px;" src="assets/img/flags/India.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-stripe" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>1 hour ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/4.jpg">
|
||||
<span class="avatar-status badge-default"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Enéas Kwadwo</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/France.png" alt="France" style="height:24px;" src="assets/img/flags/France.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-paypal" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last month</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/5.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="assets/img/flags/Spain.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-google-wallet" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last week</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/6.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Friderik Dávid</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="assets/img/flags/Poland.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-amex" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Yesterday</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
473
src/app/dashboard/dashboard.component.ts
Normal file
473
src/app/dashboard/dashboard.component.ts
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'dashboard.component.html'
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
// constructor( ) { }
|
||||
|
||||
public brandPrimary = '#20a8d8';
|
||||
public brandSuccess = '#4dbd74';
|
||||
public brandInfo = '#63c2de';
|
||||
public brandWarning = '#f8cb00';
|
||||
public brandDanger = '#f86c6b';
|
||||
|
||||
// dropdown buttons
|
||||
public status: { isopen } = { isopen: false };
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
// convert Hex to RGBA
|
||||
public convertHex(hex: string, opacity: number) {
|
||||
hex = hex.replace('#', '');
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
|
||||
return rgba;
|
||||
}
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// lineChart1
|
||||
public lineChart1Data: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 40 - 5,
|
||||
max: 84 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart1Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart1Legend = false;
|
||||
public lineChart1Type = 'line';
|
||||
|
||||
// lineChart2
|
||||
public lineChart2Data: Array<any> = [
|
||||
{
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart2Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart2Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 1 - 5,
|
||||
max: 34 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart2Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart2Legend = false;
|
||||
public lineChart2Type = 'line';
|
||||
|
||||
|
||||
// lineChart3
|
||||
public lineChart3Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart3Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart3Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart3Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
}
|
||||
];
|
||||
public lineChart3Legend = false;
|
||||
public lineChart3Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
public barChart1Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 78, 81, 80, 45, 34, 12, 40, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart1Labels: Array<any> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
|
||||
public barChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart1Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart1Legend = false;
|
||||
public barChart1Type = 'bar';
|
||||
|
||||
// mainChart
|
||||
|
||||
public random(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
public mainChartElements = 27;
|
||||
public mainChartData1: Array<number> = [];
|
||||
public mainChartData2: Array<number> = [];
|
||||
public mainChartData3: Array<number> = [];
|
||||
|
||||
public mainChartData: Array<any> = [
|
||||
{
|
||||
data: this.mainChartData1,
|
||||
label: 'Current'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData2,
|
||||
label: 'Previous'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData3,
|
||||
label: 'BEP'
|
||||
}
|
||||
];
|
||||
/* tslint:disable:max-line-length */
|
||||
public mainChartLabels: Array<any> = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
/* tslint:enable:max-line-length */
|
||||
public mainChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value: any) {
|
||||
return value.charAt(0);
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public mainChartColours: Array<any> = [
|
||||
{ // brandInfo
|
||||
backgroundColor: this.convertHex(this.brandInfo, 10),
|
||||
borderColor: this.brandInfo,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandSuccess
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandDanger
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5]
|
||||
}
|
||||
];
|
||||
public mainChartLegend = false;
|
||||
public mainChartType = 'line';
|
||||
|
||||
// social box charts
|
||||
|
||||
public socialChartData1: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Facebook'
|
||||
}
|
||||
];
|
||||
public socialChartData2: Array<any> = [
|
||||
{
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
label: 'Twitter'
|
||||
}
|
||||
];
|
||||
public socialChartData3: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'LinkedIn'
|
||||
}
|
||||
];
|
||||
public socialChartData4: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Google+'
|
||||
}
|
||||
];
|
||||
|
||||
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public socialChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public socialChartColours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
}
|
||||
];
|
||||
public socialChartLegend = false;
|
||||
public socialChartType = 'line';
|
||||
|
||||
// sparkline charts
|
||||
|
||||
public sparklineChartData1: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
public sparklineChartData2: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
|
||||
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public sparklineChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public sparklineChartDefault: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#d1d4d7',
|
||||
}
|
||||
];
|
||||
public sparklineChartPrimary: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandPrimary,
|
||||
}
|
||||
];
|
||||
public sparklineChartInfo: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
}
|
||||
];
|
||||
public sparklineChartDanger: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
}
|
||||
];
|
||||
public sparklineChartWarning: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandWarning,
|
||||
}
|
||||
];
|
||||
public sparklineChartSuccess: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
public sparklineChartLegend = false;
|
||||
public sparklineChartType = 'line';
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
// generate random values for mainChart
|
||||
for (let i = 0; i <= this.mainChartElements; i++) {
|
||||
this.mainChartData1.push(this.random(50, 200));
|
||||
this.mainChartData2.push(this.random(80, 100));
|
||||
this.mainChartData3.push(65);
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/app/dashboard/dashboard.module.ts
Normal file
16
src/app/dashboard/dashboard.module.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutingModule } from './dashboard-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
DashboardRoutingModule,
|
||||
ChartsModule,
|
||||
BsDropdownModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
3547
src/app/icons/font-awesome.component.html
Normal file
3547
src/app/icons/font-awesome.component.html
Normal file
File diff suppressed because it is too large
Load diff
10
src/app/icons/font-awesome.component.ts
Normal file
10
src/app/icons/font-awesome.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'font-awesome.component.html'
|
||||
})
|
||||
export class FontAwesomeComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
36
src/app/icons/icons-routing.module.ts
Normal file
36
src/app/icons/icons-routing.module.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Icons'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'font-awesome',
|
||||
component: FontAwesomeComponent,
|
||||
data: {
|
||||
title: 'Font Awesome'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'simple-line-icons',
|
||||
component: SimpleLineIconsComponent,
|
||||
data: {
|
||||
title: 'Simple Line Icons'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class IconsRoutingModule {}
|
||||
15
src/app/icons/icons.module.ts
Normal file
15
src/app/icons/icons.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
import { IconsRoutingModule } from './icons-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [ IconsRoutingModule ],
|
||||
declarations: [
|
||||
FontAwesomeComponent,
|
||||
SimpleLineIconsComponent
|
||||
]
|
||||
})
|
||||
export class IconsModule { }
|
||||
561
src/app/icons/simple-line-icons.component.html
Normal file
561
src/app/icons/simple-line-icons.component.html
Normal file
|
|
@ -0,0 +1,561 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row text-center">
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/icons/simple-line-icons.component.ts
Normal file
10
src/app/icons/simple-line-icons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'simple-line-icons.component.html'
|
||||
})
|
||||
export class SimpleLineIconsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
420
src/app/layouts/full-layout.component.html
Normal file
420
src/app/layouts/full-layout.component.html
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<header class="app-header navbar">
|
||||
<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>☰</button>
|
||||
<a class="navbar-brand" href="#"></a>
|
||||
<ul class="nav navbar-nav d-md-down-none">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link navbar-toggler" href="#" appSidebarToggler>☰</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Users</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-list"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
|
||||
<a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="d-md-down-none">admin</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
|
||||
|
||||
<div class="dropdown-header text-center"><strong>Account</strong></div>
|
||||
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comment<span class="badge badge-warning">42</span></a>
|
||||
|
||||
<div class="dropdown-header text-center"><strong>Settings</strong></div>
|
||||
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Setting</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-default">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
|
||||
<div class="divider"></div>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock account</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link navbar-toggler" href="#" appAsideMenuToggler>☰</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="app-body">
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-title">
|
||||
UI Elements
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-puzzle"></i> Components</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/buttons']"><i class="icon-puzzle"></i> Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/social-buttons']"><i class="icon-puzzle"></i> Social Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/cards']"><i class="icon-puzzle"></i> Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/forms']"><i class="icon-puzzle"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/modals']"><i class="icon-puzzle"></i> Modals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/switches']"><i class="icon-puzzle"></i> Switches</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tables']"><i class="icon-puzzle"></i> Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tabs']"><i class="icon-puzzle"></i> Tabs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Icons</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/font-awesome']"><i class="icon-star"></i> Font Awesome</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/simple-line-icons']"><i class="icon-star"></i> Simple Line Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/widgets']"><i class="icon-calculator"></i> Widgets <span class="badge badge-info">NEW</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/charts']"><i class="icon-pie-chart"></i> Charts</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-title">
|
||||
Extras
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Pages</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/login']"><i class="icon-star"></i> Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/register']"><i class="icon-star"></i> Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/404']"><i class="icon-star"></i> Error 404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/500']"><i class="icon-star"></i> Error 500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="main">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<ol class="breadcrumb">
|
||||
<app-breadcrumbs></app-breadcrumbs>
|
||||
<!-- Breadcrumb Menu-->
|
||||
<li class="breadcrumb-menu d-md-down-none">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<a class="btn btn-secondary" href="#"><i class="icon-speech"></i></a>
|
||||
<a class="btn btn-secondary" [routerLink]="['/dashboard']"><i class="icon-graph"></i> Dashboard</a>
|
||||
<a class="btn btn-secondary" href="#"><i class="icon-settings"></i> Settings</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="container-fluid">
|
||||
<router-outlet></router-outlet>
|
||||
</div><!-- /.conainer-fluid -->
|
||||
</main>
|
||||
|
||||
<aside class="aside-menu">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i></ng-template>
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
|
||||
<small><b>Today</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-warning m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Meeting with <strong>Lucas</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-info m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Skype with <strong>Megan</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
||||
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
|
||||
<small><b>Tomorrow</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-danger m-0 py-3">
|
||||
<div>New UI Project - <strong>deadline</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-success m-0 py-3">
|
||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-primary m-0 py-3">
|
||||
<div><strong>Team meeting</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-speech"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-settings"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<h6>Settings</h6>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h6>System Utilization</h6>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">11444GB/16384MB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">243GB/256GB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">25GB/256GB</small>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.
|
||||
<span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
</footer>
|
||||
23
src/app/layouts/full-layout.component.ts
Normal file
23
src/app/layouts/full-layout.component.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './full-layout.component.html'
|
||||
})
|
||||
export class FullLayoutComponent implements OnInit {
|
||||
|
||||
public disabled = false;
|
||||
public status: {isopen: boolean} = {isopen: false};
|
||||
|
||||
public toggled(open: boolean): void {
|
||||
console.log('Dropdown is now: ', open);
|
||||
}
|
||||
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
0
src/app/layouts/simple-layout.component.html
Normal file
0
src/app/layouts/simple-layout.component.html
Normal file
12
src/app/layouts/simple-layout.component.ts
Normal file
12
src/app/layouts/simple-layout.component.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
})
|
||||
export class SimpleLayoutComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
}
|
||||
20
src/app/pages/404.component.html
Normal file
20
src/app/pages/404.component.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/404.component.ts
Normal file
10
src/app/pages/404.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: '404.component.html'
|
||||
})
|
||||
export class P404Component {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
20
src/app/pages/500.component.html
Normal file
20
src/app/pages/500.component.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/500.component.ts
Normal file
10
src/app/pages/500.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: '500.component.html'
|
||||
})
|
||||
export class P500Component {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
41
src/app/pages/login.component.html
Normal file
41
src/app/pages/login.component.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card-group mb-0">
|
||||
<div class="card p-4">
|
||||
<div class="card-block">
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-primary px-4">Login</button>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
|
||||
<div class="card-block text-center">
|
||||
<div>
|
||||
<h2>Sign up</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/login.component.ts
Normal file
10
src/app/pages/login.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'login.component.html'
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
52
src/app/pages/pages-routing.module.ts
Normal file
52
src/app/pages/pages-routing.module.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { P404Component } from './404.component';
|
||||
import { P500Component } from './500.component';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { RegisterComponent } from './register.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Example Pages'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '404',
|
||||
component: P404Component,
|
||||
data: {
|
||||
title: 'Page 404'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '500',
|
||||
component: P500Component,
|
||||
data: {
|
||||
title: 'Page 500'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
component: LoginComponent,
|
||||
data: {
|
||||
title: 'Login Page'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
component: RegisterComponent,
|
||||
data: {
|
||||
title: 'Register Page'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PagesRoutingModule {}
|
||||
19
src/app/pages/pages.module.ts
Normal file
19
src/app/pages/pages.module.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { P404Component } from './404.component';
|
||||
import { P500Component } from './500.component';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { RegisterComponent } from './register.component';
|
||||
|
||||
import { PagesRoutingModule } from './pages-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [ PagesRoutingModule ],
|
||||
declarations: [
|
||||
P404Component,
|
||||
P500Component,
|
||||
LoginComponent,
|
||||
RegisterComponent
|
||||
]
|
||||
})
|
||||
export class PagesModule { }
|
||||
45
src/app/pages/register.component.html
Normal file
45
src/app/pages/register.component.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card mx-4">
|
||||
<div class="card-block p-4">
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Repeat password">
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-block btn-success">Create Account</button>
|
||||
</div>
|
||||
<div class="card-footer p-4">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/register.component.ts
Normal file
10
src/app/pages/register.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'register.component.html'
|
||||
})
|
||||
export class RegisterComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
17
src/app/shared/aside.directive.ts
Normal file
17
src/app/shared/aside.directive.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the aside to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appAsideMenuToggler]',
|
||||
})
|
||||
export class AsideToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('aside-menu-hidden');
|
||||
}
|
||||
}
|
||||
42
src/app/shared/breadcrumb.component.ts
Normal file
42
src/app/shared/breadcrumb.component.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||||
import 'rxjs/add/operator/filter';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumbs',
|
||||
template: `
|
||||
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
|
||||
<li class="breadcrumb-item"
|
||||
*ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
|
||||
[ngClass]="{active: last}">
|
||||
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
|
||||
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
|
||||
</li>
|
||||
</ng-template>`
|
||||
})
|
||||
export class BreadcrumbsComponent implements OnInit {
|
||||
breadcrumbs: Array<Object>;
|
||||
constructor(private router: Router, private route: ActivatedRoute) {}
|
||||
ngOnInit(): void {
|
||||
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
|
||||
this.breadcrumbs = [];
|
||||
let currentRoute = this.route.root,
|
||||
url = '';
|
||||
do {
|
||||
const childrenRoutes = currentRoute.children;
|
||||
currentRoute = null;
|
||||
childrenRoutes.forEach(route => {
|
||||
if (route.outlet === 'primary') {
|
||||
const routeSnapshot = route.snapshot;
|
||||
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
|
||||
this.breadcrumbs.push({
|
||||
label: route.snapshot.data,
|
||||
url: url
|
||||
});
|
||||
currentRoute = route;
|
||||
}
|
||||
});
|
||||
} while (currentRoute);
|
||||
});
|
||||
}
|
||||
}
|
||||
31
src/app/shared/nav-dropdown.directive.ts
Normal file
31
src/app/shared/nav-dropdown.directive.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Directive, HostListener, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[appNavDropdown]'
|
||||
})
|
||||
export class NavDropdownDirective {
|
||||
|
||||
constructor(private el: ElementRef) { }
|
||||
|
||||
toggle() {
|
||||
this.el.nativeElement.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the dropdown to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appNavDropdownToggle]'
|
||||
})
|
||||
export class NavDropdownToggleDirective {
|
||||
constructor(private dropdown: NavDropdownDirective) {}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
this.dropdown.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];
|
||||
92
src/app/shared/sidebar.directive.ts
Normal file
92
src/app/shared/sidebar.directive.ts
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the sidebar to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarToggler]'
|
||||
})
|
||||
export class SidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appSidebarMinimizer]'
|
||||
})
|
||||
export class SidebarMinimizeDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-minimized');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appMobileSidebarToggler]'
|
||||
})
|
||||
export class MobileSidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-mobile-show');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the off-canvas sidebar to be closed via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarClose]'
|
||||
})
|
||||
export class SidebarOffCanvasCloseDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
// Toggle element class
|
||||
private toggleClass(elem: any, elementClassName: string) {
|
||||
let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
|
||||
if (this.hasClass(elem, elementClassName)) {
|
||||
while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
|
||||
newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
|
||||
}
|
||||
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
||||
} else {
|
||||
elem.className += ' ' + elementClassName;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
|
||||
if (this.hasClass(document.querySelector('body'), 'sidebar-off-canvas')) {
|
||||
this.toggleClass(document.querySelector('body'), 'sidebar-opened');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const SIDEBAR_TOGGLE_DIRECTIVES = [
|
||||
SidebarToggleDirective,
|
||||
SidebarMinimizeDirective,
|
||||
SidebarOffCanvasCloseDirective,
|
||||
MobileSidebarToggleDirective
|
||||
];
|
||||
20
src/app/widgets/widgets-routing.module.ts
Normal file
20
src/app/widgets/widgets-routing.module.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { WidgetsComponent } from './widgets.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: WidgetsComponent,
|
||||
data: {
|
||||
title: 'Widgets'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class WidgetsRoutingModule {}
|
||||
975
src/app/widgets/widgets.component.html
Normal file
975
src/app/widgets/widgets.component.html
Normal file
|
|
@ -0,0 +1,975 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart1Data"
|
||||
[labels]="lineChart1Labels"
|
||||
[options]="lineChart1Options"
|
||||
[colors]="lineChart1Colours"
|
||||
[legend]="lineChart1Legend"
|
||||
[chartType]="lineChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block pb-0">
|
||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
||||
<i class="icon-location-pin"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart2Data"
|
||||
[labels]="lineChart2Labels"
|
||||
[options]="lineChart2Options"
|
||||
[colors]="lineChart2Colours"
|
||||
[legend]="lineChart2Legend"
|
||||
[chartType]="lineChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right">
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart3Data"
|
||||
[labels]="lineChart3Labels"
|
||||
[options]="lineChart3Options"
|
||||
[colors]="lineChart3Colours"
|
||||
[legend]="lineChart3Legend"
|
||||
[chartType]="lineChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart1Data"
|
||||
[labels]="barChart1Labels"
|
||||
[options]="barChart1Options"
|
||||
[colors]="barChart1Colours"
|
||||
[legend]="barChart1Legend"
|
||||
[chartType]="barChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-inverse card-header-primary">
|
||||
<div class="font-weight-bold">
|
||||
<span>SALE</span>
|
||||
<span class="float-right">$1.890,65</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>Today 6:43 AM</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>+432,50 (15,78%)</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart4Data"
|
||||
[labels]="lineChart4Labels"
|
||||
[options]="lineChart4Options"
|
||||
[colors]="lineChart4Colours"
|
||||
[legend]="lineChart4Legend"
|
||||
[chartType]="lineChart4Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart2Data"
|
||||
[labels]="barChart2Labels"
|
||||
[options]="barChart2Options"
|
||||
[colors]="barChart2Colours"
|
||||
[legend]="barChart2Legend"
|
||||
[chartType]="barChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-inverse card-header-danger">
|
||||
<div class="font-weight-bold">
|
||||
<span>SALE</span>
|
||||
<span class="float-right">$1.890,65</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>Today 6:43 AM</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>+432,50 (15,78%)</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart4Data"
|
||||
[labels]="lineChart4Labels"
|
||||
[options]="lineChart4Options"
|
||||
[colors]="lineChart4Colours"
|
||||
[legend]="lineChart4Legend"
|
||||
[chartType]="lineChart4Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart2Data"
|
||||
[labels]="barChart2Labels"
|
||||
[options]="barChart2Options"
|
||||
[colors]="barChart2Colours"
|
||||
[legend]="barChart2Legend"
|
||||
[chartType]="barChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-inverse card-header-success">
|
||||
<div class="font-weight-bold">
|
||||
<span>SALE</span>
|
||||
<span class="float-right">$1.890,65</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>Today 6:43 AM</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>+432,50 (15,78%)</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart4Data"
|
||||
[labels]="lineChart4Labels"
|
||||
[options]="lineChart4Options"
|
||||
[colors]="lineChart4Colours"
|
||||
[legend]="lineChart4Legend"
|
||||
[chartType]="lineChart4Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart2Data"
|
||||
[labels]="barChart2Labels"
|
||||
[options]="barChart2Options"
|
||||
[colors]="barChart2Colours"
|
||||
[legend]="barChart2Legend"
|
||||
[chartType]="barChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-inverse card-header-warning">
|
||||
<div class="font-weight-bold">
|
||||
<span>SALE</span>
|
||||
<span class="float-right">$1.890,65</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<small>Today 6:43 AM</small>
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<small>+432,50 (15,78%)</small>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart4Data"
|
||||
[labels]="lineChart4Labels"
|
||||
[options]="lineChart4Options"
|
||||
[colors]="lineChart4Colours"
|
||||
[legend]="lineChart4Legend"
|
||||
[chartType]="lineChart4Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:38px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart2Data"
|
||||
[labels]="barChart2Labels"
|
||||
[options]="barChart2Options"
|
||||
[colors]="barChart2Colours"
|
||||
[legend]="barChart2Legend"
|
||||
[chartType]="barChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-xs my-3">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-xs my-3">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-xs my-3">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-xs my-3">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-white progress-xs my-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-white progress-xs my-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-white progress-xs my-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block">
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<div class="progress progress-white progress-xs my-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart3Data"
|
||||
[labels]="barChart3Labels"
|
||||
[options]="barChart3Options"
|
||||
[colors]="barChart3Primary"
|
||||
[legend]="barChart3Legend"
|
||||
[chartType]="barChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart3Data"
|
||||
[labels]="barChart3Labels"
|
||||
[options]="barChart3Options"
|
||||
[colors]="barChart3Danger"
|
||||
[legend]="barChart3Legend"
|
||||
[chartType]="barChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart3Data"
|
||||
[labels]="barChart3Labels"
|
||||
[options]="barChart3Options"
|
||||
[colors]="barChart3Success"
|
||||
[legend]="barChart3Legend"
|
||||
[chartType]="barChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart5Data"
|
||||
[labels]="lineChart5Labels"
|
||||
[options]="lineChart5Options"
|
||||
[colors]="lineChart5Info"
|
||||
[legend]="lineChart5Legend"
|
||||
[chartType]="lineChart5Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart5Data"
|
||||
[labels]="lineChart5Labels"
|
||||
[options]="lineChart5Options"
|
||||
[colors]="lineChart5Success"
|
||||
[legend]="lineChart5Legend"
|
||||
[chartType]="lineChart5Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-2 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block text-center">
|
||||
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
|
||||
<div class="h2 py-3">1,123</div>
|
||||
<div class="chart-wrapper " style="height:40px;width:80px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart5Data"
|
||||
[labels]="lineChart5Labels"
|
||||
[options]="lineChart5Options"
|
||||
[colors]="lineChart5Warning"
|
||||
[legend]="lineChart5Legend"
|
||||
[chartType]="lineChart5Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div class="card-footer px-3 py-2">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div class="card-footer px-3 py-2">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div class="card-footer px-3 py-2">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-3 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div class="card-footer px-3 py-2">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-block p-0 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speech"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">972</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
||||
<div class="progress progress-xs mt-3 mb-0">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-success">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speech"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">972</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
||||
<div class="progress progress-white progress-xs mt-3">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
386
src/app/widgets/widgets.component.ts
Normal file
386
src/app/widgets/widgets.component.ts
Normal file
|
|
@ -0,0 +1,386 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'widgets.component.html'
|
||||
})
|
||||
export class WidgetsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
public brandPrimary = '#20a8d8';
|
||||
public brandSuccess = '#4dbd74';
|
||||
public brandInfo = '#63c2de';
|
||||
public brandWarning = '#f8cb00';
|
||||
public brandDanger = '#f86c6b';
|
||||
|
||||
// convert Hex to RGBA
|
||||
// public convertHex(hex: string, opacity: number){
|
||||
// hex = hex.replace('#','');
|
||||
// let r = parseInt(hex.substring(0,2), 16);
|
||||
// let g = parseInt(hex.substring(2,4), 16);
|
||||
// let b = parseInt(hex.substring(4,6), 16);
|
||||
//
|
||||
// let rgba = 'rgba('+r+','+g+','+b+','+opacity/100+')';
|
||||
// return rgba;
|
||||
// }
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// lineChart1
|
||||
public lineChart1Data: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 40 - 5,
|
||||
max: 84 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart1Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart1Legend = false;
|
||||
public lineChart1Type = 'line';
|
||||
|
||||
// lineChart2
|
||||
public lineChart2Data: Array<any> = [
|
||||
{
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart2Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart2Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 1 - 5,
|
||||
max: 34 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart2Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart2Legend = false;
|
||||
public lineChart2Type = 'line';
|
||||
|
||||
|
||||
// lineChart3
|
||||
public lineChart3Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart3Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart3Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart3Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
}
|
||||
];
|
||||
public lineChart3Legend = false;
|
||||
public lineChart3Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
public barChart1Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 78, 81, 80, 45, 34, 12, 40, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart1Labels: Array<any> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
|
||||
public barChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart1Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart1Legend = false;
|
||||
public barChart1Type = 'bar';
|
||||
|
||||
// lineChart4
|
||||
public lineChart4Data: Array<any> = [
|
||||
{
|
||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart4Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
public lineChart4Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
points: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: { point: { radius: 0 } },
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart4Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
borderWidth: 2
|
||||
}
|
||||
];
|
||||
public lineChart4Legend = false;
|
||||
public lineChart4Type = 'line';
|
||||
|
||||
|
||||
// barChart2
|
||||
public barChart2Data: Array<any> = [
|
||||
{
|
||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart2Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
public barChart2Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart2Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(0,0,0,.2)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart2Legend = false;
|
||||
public barChart2Type = 'bar';
|
||||
|
||||
|
||||
// barChart3
|
||||
public barChart3Data: Array<any> = [
|
||||
{
|
||||
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart3Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
public barChart3Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart3Primary: Array<any> = [
|
||||
{
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}
|
||||
];
|
||||
public barChart3Danger: Array<any> = [
|
||||
{
|
||||
backgroundColor: this.brandDanger,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}
|
||||
];
|
||||
public barChart3Success: Array<any> = [
|
||||
{
|
||||
backgroundColor: this.brandSuccess,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}
|
||||
];
|
||||
public barChart3Legend = false;
|
||||
public barChart3Type = 'bar';
|
||||
|
||||
|
||||
// lineChart5
|
||||
public lineChart5Data: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart5Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart5Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
points: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: { point: { radius: 0 } },
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart5Info: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
borderWidth: 2
|
||||
}
|
||||
];
|
||||
public lineChart5Success: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
borderWidth: 2
|
||||
}
|
||||
];
|
||||
public lineChart5Warning: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandWarning,
|
||||
borderWidth: 2
|
||||
}
|
||||
];
|
||||
public lineChart5Legend = false;
|
||||
public lineChart5Type = 'line';
|
||||
|
||||
}
|
||||
14
src/app/widgets/widgets.module.ts
Normal file
14
src/app/widgets/widgets.module.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
import { WidgetsComponent } from './widgets.component';
|
||||
import { WidgetsRoutingModule } from './widgets-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
WidgetsRoutingModule,
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [ WidgetsComponent ]
|
||||
})
|
||||
export class WidgetsModule { }
|
||||
Reference in a new issue