Resources & Tools
+Thank you for using and showing some ♥ for Nx.
diff --git a/apps/breadcrumb-demo/src/app/app.module.ts b/apps/breadcrumb-demo/src/app/app.module.ts index 5ce7811..dccd313 100644 --- a/apps/breadcrumb-demo/src/app/app.module.ts +++ b/apps/breadcrumb-demo/src/app/app.module.ts @@ -2,10 +2,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; - +import {BreadcrumbModule} from "@xng/xng-breadcrumb" @NgModule({ declarations: [AppComponent], - imports: [BrowserModule], + imports: [BrowserModule, BreadcrumbModule], providers: [], bootstrap: [AppComponent], }) diff --git a/libs/xng-breadcrumb/src/index.ts b/libs/xng-breadcrumb/src/index.ts index d334407..c1a6ff1 100644 --- a/libs/xng-breadcrumb/src/index.ts +++ b/libs/xng-breadcrumb/src/index.ts @@ -1 +1,2 @@ -export * from './lib/xng-breadcrumb.module'; +export * from './lib/breadcrumb.module'; +export * from './lib/breadcrumb.component'; diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb-item.directive.ts b/libs/xng-breadcrumb/src/lib/breadcrumb-item.directive.ts new file mode 100644 index 0000000..b0c8c29 --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb-item.directive.ts @@ -0,0 +1,13 @@ +import { Directive } from '@angular/core'; + +/** + * This directive is used to customize the breadcrumb label behavior + * *xngBreadcrumbItem directive can be used in the child element of xng-breadcrumb + * Usage: refer to demo app.component.html + */ +@Directive({ + selector: '[xngBreadcrumbItem]' +}) +export class BreadcrumbItemDirective { + constructor() {} +} diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.css b/libs/xng-breadcrumb/src/lib/breadcrumb.component.css new file mode 100644 index 0000000..8d4f8ea --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.component.css @@ -0,0 +1,47 @@ +.xng-breadcrumb-root { + margin: 0; + color: rgba(0, 0, 0, 0.6); +} + +.xng-breadcrumb-list { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 0; + padding: 0; +} + +.xng-breadcrumb-item { + list-style: none; +} + +.xng-breadcrumb-trail { + display: flex; + align-items: center; + color: rgba(0, 0, 0, 0.9); +} + +.xng-breadcrumb-link { + display: flex; + align-items: center; + white-space: nowrap; + color: inherit; + text-decoration: none; + transition: text-decoration 0.3s; +} + +.xng-breadcrumb-link:hover { + text-decoration: underline; +} + +.xng-breadcrumb-link-disabled { + pointer-events: none; + cursor: disabled; +} + +.xng-breadcrumb-separator { + display: flex; + user-select: none; + margin-left: 8px; + margin-right: 8px; +} diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.html b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html new file mode 100644 index 0000000..722f17c --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html @@ -0,0 +1 @@ +xng-breadcrumb works!
diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts new file mode 100644 index 0000000..c18704e --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'xng-breadcrumb', + templateUrl: './breadcrumb.component.html', + styleUrls: ['./breadcrumb.component.css'], + encapsulation: ViewEncapsulation.None +}) +export class BreadcrumbComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.module.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.module.ts new file mode 100644 index 0000000..a2ba147 --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { BreadcrumbComponent } from './breadcrumb.component'; +import { BreadcrumbItemDirective } from './breadcrumb-item.directive'; + +@NgModule({ + imports: [CommonModule], + declarations: [BreadcrumbComponent, BreadcrumbItemDirective], + exports: [BreadcrumbComponent] +}) +export class BreadcrumbModule {} diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts new file mode 100644 index 0000000..f5e42c5 --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class BreadcrumbService { + + constructor() { } +} diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.ts new file mode 100644 index 0000000..12c11e4 --- /dev/null +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.ts @@ -0,0 +1,46 @@ +/** + * Breadcrumb item built internally, private to this module + */ +export interface Breadcrumb { + /** + * breadcrumb label for a route + */ + label?: string; + /** + * unique alias name for a route path + */ + alias?: string; + /** + * hide or show the breadcrumb item + */ + skip?: boolean; + /** + * disable the link for the breadcrumb. + * It may be needed when the routing has the path, but navigating to that path is of no use + */ + disable?: boolean; + /** + * custom data for each breadcrumb that is passed back to ng-template + */ + info?: any; + /** + * actual route path with resolved param. Ex /mentor/2, connect/edit + */ + routeLink?: string; + /** + * route with path params converted to a RegExp + * path '/mentor/:id' becomes routeRegex '/mentor/[^/]+', which can be matched against when needed + */ + routeRegex?: string; + /** + * This is additional info on each breadcrumb item whether label is auto generated or user specified + * isAutoGeneratedLabel has to be present at component level but not at the service, + * since we may need to support multiple breadcrumb components in same app + */ + isAutoGeneratedLabel?: boolean; + /** + * Query params in string form. + */ + queryParams?: any; + fragment?: string; +} diff --git a/libs/xng-breadcrumb/src/lib/xng-breadcrumb.module.ts b/libs/xng-breadcrumb/src/lib/xng-breadcrumb.module.ts deleted file mode 100644 index 4bd8558..0000000 --- a/libs/xng-breadcrumb/src/lib/xng-breadcrumb.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - imports: [CommonModule], -}) -export class XngBreadcrumbModule {}