Web Demo Mobile Demo Angular Demo Vue Demo React Demo

侧栏菜单 SideMenu

源代码
import { Component, ViewEncapsulation } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
        <h2>SideMenu Style</h2>
        <eui-linkbutton (click)="toggle()" style="margin-bottom:20px">Toggle</eui-linkbutton>
        <eui-sidemenu 
                [style.width.px]="width"
                [data]="menus"
                [collapsed]="collapsed">
        </eui-sidemenu>
    `,
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    width = 200;
    collapsed = false;
    menus = [{
        text: 'Forms',
        iconCls: 'fa fa-wpforms',
        state: 'open',
        children: [{
            text: 'Form Element'
        },{
            text: 'Wizard'
        },{
            text: 'File Upload'
        }]
    },{
        text: 'Mail',
        iconCls: 'fa fa-at',
        selected: true,
        children: [{
            text: 'Inbox'
        },{
            text: 'Sent'
        },{
            text: 'Trash',
            children: [{
                text: 'Item1'
            },{
                text: 'Item2'
            }]
        }]
    },{
        text: 'Layout',
        iconCls: 'fa fa-table',
        children: [{
            text: 'Panel'
        },{
            text: 'Accordion'
        },{
            text: 'Tabs'
        }]
    }];

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