Ionic2 中的可折叠侧边菜单

Question

我想创建一个包含可折叠内容的侧边菜单。有没有可用的示例可供我参考？我试过搜索相同但失败了。任何帮助或指针将不胜感激。提前致谢。

Answer 1

你可以看看my github repo。这是组件的样子：

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

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.

然后在您的 app.component.ts 文件中，创建一个选项数组

public options: Array<MenuOptionModel>;

其中 MenuOptionModel 会是这样的：

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
        }
    ]
};

然后将其包含在 app.component.html 文件中

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

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

Ionic2 中的可折叠侧边菜单

Collapsible side menu in Ionic2

typescript

ionic2

ionic3

angular