EasyUI 基本侧栏菜单(Basic)

侧栏菜单 SideMenu

源代码

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
        <h2>Basic SideMenu</h2>
        <eui-linkbutton (click)="toggle()" style="margin-bottom:20px">Toggle</eui-linkbutton>
        <eui-sidemenu 
                [style.width.px]="width"
                [data]="menus"
                [collapsed]="collapsed"
                [(selection)]="selection">
        </eui-sidemenu>
        <p *ngIf="selection">You selected: {{selection.text}}</p>
    `
})
export class AppComponent {
    width = 200;
    collapsed = false;
    selection = null;
    menus = [{
        text: 'Item1',
        iconCls: 'icon-sum',
        state: 'open',
        children: [{
            text: 'Option1'
        },{
            text: 'Option2'
        },{
            text: 'Option3',
            children: [{
                text: 'Option31'
            },{
                text: 'Option32'
            }]
        }]
    },{
        text: 'Item2',
        iconCls: 'icon-more',
        children: [{
            text: 'Option4'
        },{
            text: 'Option5'
        },{
            text: 'Option6'
        }]
    }];

    toggle(){
        this.collapsed = !this.collapsed;
        this.width = this.collapsed ? 50 : 200;
    }
}

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);