Nested Group feature added to navigation

This commit is contained in:
mustafahlvc 2017-09-26 11:58:34 +03:00
parent 1be3f0066b
commit 3d9ded9a44
4 changed files with 12 additions and 1 deletions

View File

@ -11,6 +11,7 @@
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children">
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item> <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse> <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
</ng-container> </ng-container>
</div> </div>

View File

@ -7,5 +7,6 @@
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item> <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse> <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
</ng-container> </ng-container>
</div> </div>

View File

@ -7,7 +7,7 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
}) })
export class FuseNavVerticalGroupComponent implements OnInit export class FuseNavVerticalGroupComponent implements OnInit
{ {
@HostBinding('class') classes = 'nav-group'; @HostBinding('class') classes = 'nav-group nav-item';
@Input() item: any; @Input() item: any;
constructor() constructor()

View File

@ -12,6 +12,7 @@
} }
.nav-group { .nav-group {
display: block;
> .group-title { > .group-title {
position: relative; position: relative;
@ -107,6 +108,10 @@
padding-left: 56px; padding-left: 56px;
} }
&.nav-group {
padding-left: 32px;
}
> .children { > .children {
> .nav-item { > .nav-item {
@ -114,6 +119,10 @@
> .nav-link { > .nav-link {
padding-left: 72px; padding-left: 72px;
} }
&.nav-group {
padding-left: 48px;
}
} }
} }
} }