feat(breadcrumb): basic framework

src/app/pages/manager/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'manager-breadcrumb',
+	template: `
+		<nav>
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item">
+					<a><nb-icon icon="home-outline"></nb-icon></a>
+				</li>
+				<li class="breadcrumb-item">
+					<a>
+						<nb-icon icon="google-outline"></nb-icon>
+						<span class="breadcrumb-cloud">Cloud</span>
+					</a>
+				</li>
+				<li class="breadcrumb-item">
+					<a><span>path</span></a>
+				</li>
+				<li class="breadcrumb-item">
+					<a><span>to</span></a>
+				</li>
+				<li class="breadcrumb-item active">Data</li>
+				<a class="right option"><nb-icon icon="refresh"></nb-icon></a>
+				<a class="option"><nb-icon [icon]="listView ? 'list' : 'grid'"></nb-icon></a>
+				<a class="option"><nb-icon icon="info"></nb-icon></a>
+			</ol>
+		</nav>
+	`,
+	styles: [
+		`
+			li > a {
+				background: white;
+				border-radius: 1rem;
+				padding: 0 0.5rem;
+			}
+			.breadcrumb-cloud {
+				padding-left: 0.5rem;
+			}
+			.right {
+				margin-left: auto;
+			}
+			.option {
+				padding: 0 0.3rem;
+			}
+		`,
+	],
+})
+export class BreadcrumbComponent implements OnInit {
+	listView = true;
+	constructor() {}
+
+	ngOnInit() {}
+}

src/app/pages/manager/breadcrumb/path.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { PathService } from './path.service';
+
+describe('Service: Path', () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			providers: [PathService],
+		});
+	});
+
+	it('should ...', inject([PathService], (service: PathService) => {
+		expect(service).toBeTruthy();
+	}));
+});

src/app/pages/manager/breadcrumb/path.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+	providedIn: 'root',
+})
+export class PathService {
+	constructor() {}
+}

src/app/pages/manager/manager.component.ts

@@ -1,20 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-manager',
-  template: `
-    <p>
-      manager works!
-    </p>
-  `,
-  styles: [
-  ]
+	selector: 'app-manager',
+	template: `
+		<nb-card>
+			<nb-card-body>
+				<div class="row">
+					<div class="col">
+						<manager-breadcrumb> </manager-breadcrumb>
+					</div>
+				</div>
+				<p>123</p>
+			</nb-card-body>
+		</nb-card>
+	`,
+	styles: [],
 })
 export class ManagerComponent implements OnInit {
+	constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+	ngOnInit(): void {}
 }

src/app/pages/manager/manager.module.ts

@@ -3,13 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { ManagerRoutingModule } from './manager-routing.module';
 import { ManagerComponent } from './manager.component';
-
+import { NbActionsModule, NbCardModule, NbIconModule } from '@nebular/theme';
+import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 
 @NgModule({
-  declarations: [ManagerComponent],
-  imports: [
-    CommonModule,
-    ManagerRoutingModule
-  ]
+	declarations: [ManagerComponent, BreadcrumbComponent],
+	imports: [CommonModule, ManagerRoutingModule, NbActionsModule, NbCardModule, NbIconModule],
 })
-export class ManagerModule { }
+export class ManagerModule {}