purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navigation interface

Browse Source
This commit is contained in:
Sercan Yemen 2018-05-30 19:48:59 +03:00
parent a29c4b01ad
commit f693298f3a
8 changed files with 719 additions and 654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
View File

@ -6,21 +6,37 @@
</a>
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.function" (click)="toggleOpen($event)"
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function"
(click)="toggleOpen($event);item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" (click)="toggleOpen($event);item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

5
src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
View File

@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { FuseNavigationService } from '../../navigation.service';
import { FuseNavigationItem } from '@fuse/types';
import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
selector : 'fuse-nav-vertical-collapse',
@ -15,7 +16,7 @@ import { fuseAnimations } from '@fuse/animations';
export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy
{
@Input()
item: any;
item: FuseNavigationItem;
@HostBinding('class')
classes = 'nav-collapse nav-item';

4
src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
View File

@ -1,5 +1,7 @@
import { Component, HostBinding, Input } from '@angular/core';
import { FuseNavigationItem } from '@fuse/types';
@Component({
selector : 'fuse-nav-vertical-group',
templateUrl: './nav-vertical-group.component.html',
@ -11,7 +13,7 @@ export class FuseNavVerticalGroupComponent
classes = 'nav-group nav-item';
@Input()
item: any;
item: FuseNavigationItem;
/**
* Constructor

25
src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,21 +1,36 @@
<ng-container *ngIf="!item.hidden">
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.function"
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
<span class="nav-link" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

4
src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
View File

@ -1,5 +1,7 @@
import { Component, HostBinding, Input } from '@angular/core';
import { FuseNavigationItem } from '@fuse/types';
@Component({
selector : 'fuse-nav-vertical-item',
templateUrl: './nav-vertical-item.component.html',
@ -11,7 +13,7 @@ export class FuseNavVerticalItemComponent
classes = 'nav-item';
@Input()
item: any;
item: FuseNavigationItem;
/**
* Constructor

26
src/@fuse/types/fuse-navigation.ts Normal file
View File

@ -0,0 +1,26 @@
export interface FuseNavigationItem
{
id: string;
title: string;
type: 'item' | 'group' | 'collapse';
translate?: string;
icon?: string;
hidden?: boolean;
url?: string;
exactMatch?: boolean;
externalUrl?: boolean;
openInNewTab?: boolean;
function?: any;
badge?: {
title?: string;
translate?: string;
bg?: string;
fg?: string;
};
children?: FuseNavigationItem[];
}
export interface FuseNavigation extends FuseNavigationItem
{
children?: FuseNavigationItem[];
}

1
src/@fuse/types/index.ts
View File

@ -1 +1,2 @@
export * from './fuse-config';
export * from './fuse-navigation';

1272
src/app/navigation/navigation.ts
View File

File diff suppressed because it is too large Load Diff