Ionic2中的可折疊側面菜單

Question

我想創建一個具有可折疊內容的側菜單。 有沒有可用的示例可供參考？ 我嘗試搜索相同但失敗了。 任何幫助或指針將不勝感激。 提前致謝。

Answer 1

您可以看一下我的github倉庫 。 這是組件的外觀：

README.md文件清楚地說明了如何使用它：

只需在項目中復制側面菜單文件夾（包含html，ts和scss文件）即可。 然后在您的@NgModule的聲明數組中包含SideMenuContentComponent。

然后在您的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>

回購協議還有很多改進，但是您可以看一下源代碼以了解如何完成所有工作（未將代碼添加到答案中，因為它有約250行代碼）。