Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
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);