Collapsible side menu in Ionic2

问题

I want to create a side menu with collapsible content. Is there any example available out there that I could use as a reference? I've tried searching for the same but failed. Any help or pointer would be highly appreciated. Thanks in advance.

回答1:

You can take a look at my github repo. This is how the component looks like:

The README.md file explains clearly how to use it:

Just copy the side-menu folder (inculding the html, ts and scss files) in your project. Then include the SideMenuContentComponent in the declarations array from your @NgModule.

Then in your app.component.ts file, create an array of options

public options: Array<MenuOptionModel>;

Where MenuOptionModel would be something like this:

let menuOption: MenuOptionModel = {
    iconName: 'ios-arrow-down',
    displayName: `Option Name`,
    component: PageName,
    isLogin: false,
    isLogout: false,
    subItems: [
        {
            iconName: 'ios-basket',
            displayName: `Sub Option 1`,
            component: PageName,
            isLogin: false,
            isLogout: false
        },
        {
            iconName: 'ios-bookmark',
            displayName: `Sub Option 2`,
            component: PageName,
            isLogin: false,
            isLogout: false
        }
    ]
};

and then just include it in the app.component.html file

<side-menu-content [options]="options"></side-menu-content>

There're a lot of improvements yet to be made in the repo, but you can take a look at the source code to get an idea of how everything is done (didn't add the code to the answer because it has ~250 lines of code).

来源：https://stackoverflow.com/questions/43456126/collapsible-side-menu-in-ionic2

标签

angular

typescript

ionic2

ionic3