feat(布局模块): 添加sider-menu组件

jiayisheji · Mar 1, 2018 · fc0ade1 · fc0ade1
1 parent 73f955a
commit fc0ade1
Show file tree

Hide file tree

Showing 5 changed files with 355 additions and 1 deletion.
diff --git a/src/app/feature/layout/layout.module.ts b/src/app/feature/layout/layout.module.ts
@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '@app/shared';
 import { LayoutRoutingModule } from './layout-routing.module';
 import { LayoutComponent } from './layout.component';
-import { SiderComponent } from './sider/sider.component';
+import { SiderComponent } from './sider.component';
 import { HeaderComponent } from './header.component';
 import { FooterComponent } from './footer.component';
 import { ContentComponent } from './content.component';
 import { HeaderTopbarComponent } from './header-topbar/header-topbar.component';
+import { SiderMenuComponent } from './sider-menu/sider-menu.component';
 
 @NgModule({
     imports: [
@@ -20,6 +21,7 @@ import { HeaderTopbarComponent } from './header-topbar/header-topbar.component';
         FooterComponent,
         ContentComponent,
         HeaderTopbarComponent,
+        SiderMenuComponent
     ],
     providers: [],
 })

diff --git a/src/app/feature/layout/sider-menu/sider-menu.component.html b/src/app/feature/layout/sider-menu/sider-menu.component.html
@@ -0,0 +1,79 @@
+<ul sim-menu [mode]="'inline'" class="menu-dark" [inlineCollapsed]="_collapsed">
+  <ng-container *ngFor="let m of items">
+    <!-- 如果有菜单 -->
+    <ng-container *ngIf="m.children">
+      <li sim-sub-menu *ngIf="m.children" routerLinkActive="menu-submenu-selected" [onOpen]="m._fold" (onOpenChange)="openChange($event, m, items)">
+        <span menu-title>
+          <i class="menu-icon icon-{{m.icon}}"></i>
+          <span>{{m.name}}</span>
+        </span>
+        <!-- 显示子菜单 -->
+        <ng-container *ngFor="let n of m.children">
+          <!-- 如果有菜单 -->
+          <ng-container *ngIf="n.children">
+            <li sim-sub-menu routerLinkActive="menu-submenu-selected" [onOpen]="n._fold" (onOpenChange)="openChange($event, n, m.children)">
+              <span menu-title>
+                <i class="menu-icon icon-{{n.icon}}" *ngIf="n.icon"></i>
+                <span>{{n.name}}</span>
+              </span>
+              <!-- 显示子菜单 -->
+              <ng-container *ngFor="let k of n.children">
+                <!-- 如果没有子菜单 -->
+                <ng-container *ngIf="!k.children">
+                  <li sim-menu-item role="menuitem" routerLinkActive="menu-item-selected">
+                    <ng-container *ngIf="!k.target">
+                      <a [routerLink]="['/', m.path, n.path, k.path]">
+                        <i class="menu-icon icon-{{k.icon}}" *ngIf="k.icon"></i>
+                        <span>{{k.name}}</span>
+                      </a>
+                    </ng-container>
+                    <ng-container *ngIf="k.target">
+                      <a [href]="k.path" [target]="k.target">
+                        <i class="menu-icon icon-{{k.icon}}" *ngIf="k.icon"></i>
+                        <span>{{k.name}}</span>
+                      </a>
+                    </ng-container>
+                  </li>
+                </ng-container>
+              </ng-container>
+            </li>
+          </ng-container>
+          <!-- 如果没有子菜单 -->
+          <ng-container *ngIf="!n.children">
+            <li sim-menu-item role="menuitem" routerLinkActive="menu-item-selected">
+              <ng-container *ngIf="!n.target">
+                <a [routerLink]="['/', m.path, n.path]">
+                  <i class="menu-icon icon-{{n.icon}}" *ngIf="n.icon"></i>
+                  <span>{{n.name}}</span>
+                </a>
+              </ng-container>
+              <ng-container *ngIf="n.target">
+                <a [href]="n.path" [target]="n.target">
+                  <i class="menu-icon icon-{{n.icon}}" *ngIf="n.icon"></i>
+                  <span>{{n.name}}</span>
+                </a>
+              </ng-container>
+            </li>
+          </ng-container>
+        </ng-container>
+      </li>
+    </ng-container>
+    <!-- 如果没有子菜单 -->
+    <ng-container *ngIf="!m.children">
+      <li sim-menu-item role="menuitem" routerLinkActive="menu-item-selected">
+        <ng-container *ngIf="!m.target">
+          <a [routerLink]="['/', m.path]">
+            <i class="menu-icon icon-{{m.icon}}" *ngIf="m.icon"></i>
+            <span>{{m.name}}</span>
+          </a>
+        </ng-container>
+        <ng-container *ngIf="m.target">
+          <a [href]="m.path" [target]="m.target">
+            <i class="menu-icon icon-{{m.icon}}" *ngIf="m.icon"></i>
+            <span>{{m.name}}</span>
+          </a>
+        </ng-container>
+      </li>
+    </ng-container>
+  </ng-container>
+</ul>
diff --git a/src/app/feature/layout/sider-menu/sider-menu.component.scss b/src/app/feature/layout/sider-menu/sider-menu.component.scss
@@ -0,0 +1,208 @@
+.sim-menu.menu-inline-collapsed{
+    width: 80px;
+}
+.sim-menu.menu-dark,
+.sim-menu.menu-dark .menu-sub {
+    color: rgba(255, 255, 255, 0.65);
+    background: #001529;
+}
+
+.sim-menu.menu-dark .menu-submenu-title .menu-submenu-arrow,
+.sim-menu.menu-dark .menu-sub .menu-submenu-title .menu-submenu-arrow {
+    opacity: .45;
+    -webkit-transition: all .3s;
+    -o-transition: all .3s;
+    transition: all .3s;
+}
+
+.sim-menu.menu-dark .menu-submenu-title .menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-sub .menu-submenu-title .menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-title .menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-sub .menu-submenu-title .menu-submenu-arrow:before {
+    background: #fff;
+}
+
+.sim-menu.menu-dark.menu-submenu-popup {
+    background: transparent;
+}
+
+.sim-menu.menu-dark .menu-inline.menu-sub {
+    background: #000c17;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
+}
+
+.sim-menu.menu-dark.menu-horizontal {
+    border-bottom-color: #001529;
+}
+
+.sim-menu.menu-dark.menu-horizontal>.menu-item,
+.sim-menu.menu-dark.menu-horizontal>.menu-submenu {
+    border-color: #001529;
+    border-bottom: 0;
+}
+
+.sim-menu.menu-dark .menu-item,
+.sim-menu.menu-dark .menu-item-group-title,
+.sim-menu.menu-dark .menu-item>a {
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.sim-menu.menu-dark.menu-inline,
+.sim-menu.menu-dark.menu-vertical,
+.sim-menu.menu-dark.menu-vertical-left,
+.sim-menu.menu-dark.menu-vertical-right {
+    border-right: 0;
+}
+
+.sim-menu.menu-dark.menu-inline .menu-item,
+.sim-menu.menu-dark.menu-vertical .menu-item,
+.sim-menu.menu-dark.menu-vertical-left .menu-item,
+.sim-menu.menu-dark.menu-vertical-right .menu-item {
+    border-right: 0;
+    margin-left: 0;
+    left: 0;
+}
+
+.sim-menu.menu-dark.menu-inline .menu-item:after,
+.sim-menu.menu-dark.menu-vertical .menu-item:after,
+.sim-menu.menu-dark.menu-vertical-left .menu-item:after,
+.sim-menu.menu-dark.menu-vertical-right .menu-item:after {
+    border-right: 0;
+}
+
+.sim-menu.menu-dark.menu-inline .menu-item,
+.sim-menu.menu-dark.menu-inline .menu-submenu-title {
+    width: 100%;
+}
+
+.sim-menu.menu-dark {
+    .menu-submenu-title,
+    .menu-item {
+        &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background-image: radial-gradient(circle, #ffffff 10%, transparent 10.01%);
+            background-repeat: no-repeat;
+            background-size: 1000% 1000%;
+            background-position: 50%;
+            opacity: 0;
+            pointer-events: none;
+            transition: background .5s, opacity 1s;
+        }
+        &:active:after {
+            background-size: 0% 0%;
+            opacity: .2;
+            transition: 0s;
+        }
+    }
+}
+
+.sim-menu.menu-dark .menu-item:hover,
+.sim-menu.menu-dark .menu-item-active,
+.sim-menu.menu-dark .menu-submenu-active,
+.sim-menu.menu-dark .menu-submenu-open,
+.sim-menu.menu-dark .menu-submenu-selected,
+.sim-menu.menu-dark .menu-submenu-title:hover {
+    background-color: transparent;
+    color: #fff;
+}
+
+.sim-menu.menu-dark .menu-item:hover>a,
+.sim-menu.menu-dark .menu-item-active>a,
+.sim-menu.menu-dark .menu-submenu-active>a,
+.sim-menu.menu-dark .menu-submenu-open>a,
+.sim-menu.menu-dark .menu-submenu-selected>a,
+.sim-menu.menu-dark .menu-submenu-title:hover>a {
+    color: #fff;
+}
+
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title:hover>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title:hover>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title:hover>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title:hover>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title:hover>.menu-submenu-arrow,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title:hover>.menu-submenu-arrow {
+    opacity: 1;
+}
+
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title:hover>.menu-submenu-arrow:after,
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-item:hover>.menu-submenu-title:hover>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-item-active>.menu-submenu-title:hover>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-active>.menu-submenu-title:hover>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-open>.menu-submenu-title:hover>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-selected>.menu-submenu-title:hover>.menu-submenu-arrow:before,
+.sim-menu.menu-dark .menu-submenu-title:hover>.menu-submenu-title:hover>.menu-submenu-arrow:before {
+    background: #fff;
+}
+
+.sim-menu.menu-dark .menu-item-selected {
+    border-right: 0;
+    color: #fff;
+}
+
+.sim-menu.menu-dark .menu-item-selected:after {
+    border-right: 0;
+}
+
+.sim-menu.menu-dark .menu-item-selected>a,
+.sim-menu.menu-dark .menu-item-selected>a:hover {
+    color: #fff;
+}
+
+.sim-menu.menu-dark .menu-item-selected,
+.sim-menu.menu-dark:not(.menu-horizontal) .menu-item-selected {
+    background-color: #1890ff;
+}
+.sim-menu.menu-dark .menu-submenu-open.menu-submenu-vertical {
+    color: #1890ff;
+    >.menu-submenu-title .menu-submenu-arrow:before,
+    >.menu-submenu-title .menu-submenu-arrow:after{
+        background-color: #1890ff;
+    }
+    >.menu-submenu-title:hover .menu-submenu-arrow:before,
+    >.menu-submenu-title:hover .menu-submenu-arrow:after {
+        background-color: #ffffff;
+    }
+}
+
+.sim-menu.menu-dark .menu-item-disabled,
+.sim-menu.menu-dark .menu-submenu-disabled,
+.sim-menu.menu-dark .menu-item-disabled>a,
+.sim-menu.menu-dark .menu-submenu-disabled>a {
+    opacity: 0.8;
+    color: rgba(255, 255, 255, 0.35) !important;
+}
+
+.sim-menu.menu-dark .menu-item-disabled>.menu-submenu-title,
+.sim-menu.menu-dark .menu-submenu-disabled>.menu-submenu-title {
+    color: rgba(255, 255, 255, 0.35) !important;
+}
diff --git a/src/app/feature/layout/sider-menu/sider-menu.component.spec.ts b/src/app/feature/layout/sider-menu/sider-menu.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiderMenuComponent } from './sider-menu.component';
+
+describe('SiderMenuComponent', () => {
+  let component: SiderMenuComponent;
+  let fixture: ComponentFixture<SiderMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SiderMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SiderMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/feature/layout/sider-menu/sider-menu.component.ts b/src/app/feature/layout/sider-menu/sider-menu.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-sider-menu',
+  templateUrl: './sider-menu.component.html',
+  styleUrls: ['./sider-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SiderMenuComponent implements OnInit {
+  _collapsed: boolean;
+  @Input() items: Array<any> = [];
+  @Input()
+  set collapsed(value: boolean) {
+    if (value) {
+      console.log(this.items);
+      this.items.forEach(item => {
+        if (item.children) {
+          item.children.forEach(m => m._fold = false);
+        }
+        item._fold = false;
+      });
+      setTimeout(() => {
+        this._collapsed = value;
+      }, 1);
+    } else {
+      this._collapsed = value;
+    }
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+  openChange(event, item, items) {
+    if (item.children) {
+      item.children.forEach(m => m._fold = false);
+    }
+    items.forEach(m => m._fold = false);
+    item._fold = event;
+  }
+}