import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Side Panel</h2> <eui-layout style="width:700px;height:250px;"> <eui-layout-panel #west style="width:180px" region="west" headerCls="side-menu-header" bodyCls="f-column" [float]="true" [border]="false" [collapsed]="true"> <eui-panel-header> <svg class="side-toggle" viewBox="0 0 24 24" (click)="west.collapse()"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg> <span>Side Menu</span> </eui-panel-header> <div class="side-menu f-full"> <div class="side-menu-item"> <div class="side-menu-icon"> <svg class="side-toggle" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg> </div> <div class="side-menu-text">Login</div> </div> <div class="side-menu-item"> <div class="side-menu-icon"> <svg class="side-toggle" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg> </div> <div class="side-menu-text">Mark</div> </div> </div> </eui-layout-panel> <eui-layout-panel region="center" headerCls="main-header" style="height:100%"> <eui-panel-header> <svg class="side-toggle" viewBox="0 0 24 24" (click)="west.expand()"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg> <span>Main Title</span> </eui-panel-header> <div style="margin-top:50px;text-align:center;font-size:16px"> <p>Click the top menu icon to expand the side panel.</p> </div> </eui-layout-panel> </eui-layout> `, encapsulation: ViewEncapsulation.None, styles: [` .main-header{ color: #222; line-height: 30px; } .side-toggle{ position: relative; display: inline-block; width: 24px; height: 24px; top: 6px; left: 5px; margin-right: 10px; color: #000; fill: #000; cursor: pointer; } .side-menu-header .side-toggle{ color: #fff; fill: #fff; } .side-menu-header{ background: #444; color: #fff; line-height: 30px; } .side-menu{ background: #444; color: #fff; margin: 0; padding: 10px 0; } .side-menu-item{ padding: 5px 0; } .side-menu-item:hover{ background: #666; } .side-menu .side-toggle{ color: #fff; fill: #fff; top: 0; left: 8px; margin-right: 14px; } .side-menu-icon{ display: inline-block; vertical-align: middle; } .side-menu-text{ display: inline-block; vertical-align: middle; } `] }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);