Ionic2中的可折叠侧边菜单 [英] Collapsible side menu in Ionic2

问题描述

我想创建一个包含可折叠内容的侧边菜单。有没有可用的例子我可以作为参考？我试过寻找同样但失败了。任何帮助或指针将受到高度赞赏。在此先感谢。

解决方案

你可以看一下

自述文件.md文件清楚地解释了如何使用它：

只需复制侧面菜单文件夹（包含html，ts和scss文件）$你项目中的b $ b。然后在@NgModule的
声明数组中包含SideMenuContentComponent。

然后在你的应用程序中.component.ts 文件，创建一个选项数组

 公共选项：数组< MenuOptionModel> ;; 
  

其中 MenuOptionModel 将是这样的：

  let menuOption：MenuOptionModel = {
 iconName：'ios-arrow-down'，
 displayName： `Option Name`，
组件：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 
 } 
] 
}; 
  

然后只需将其包含在 app.component.html file

 < side-menu-content [options] =options>< / side-菜单内容> 
  

回购中还有很多改进，但你可以看看在源代码中了解一切如何完成（没有将代码添加到答案中，因为它有大约250行代码）。

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.

解决方案

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

这篇关于Ionic2中的可折叠侧边菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！