Hierarchical Menu (@byteowls/ionic-hierarchical-menu) for Ionic 2+ is a hierarchical / multi-level menu component.
Attention: This repository will not be maintained! EOL!
npm install @byteowls/ionic-hierarchical-menu --savehttp://plnkr.co/edit/tpl:PkGgfUq6h7vPvdp4zjHl?p=preview
If you use SystemJS to load your files, you might have to update your config:
System.config({
map: {
'@byteowls/ionic-hierarchical-menu': 'npm:@byteowls/ionic-hierarchical-menu/bundles/index.umd.js'
}
});The npm module includes both scss and css files. Depending on your use case you have to include them in your project to get the themes or default styles.
These themes are included
- default ... hierarchical-menu.themes.default
- dark ... TBD
In Ionic we can use SASS but have to customize Ionic's build process so the module styles are recognized.
For that can use the config section in our packages.json
{
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/storage": "2.0.1",
"@byteowls/ionic-hierarchical-menu": "~1.0.0-beta2",
"angular2-jwt": "0.1.28",
"ionic-angular": "2.3.0",
"ionic-native": "2.8.1",
"ionicons": "3.0.0",
"ng2-translate": "5.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "~1.1.4",
"typescript": "~2.0.9"
},
"config": {
"ionic_sass": "./config/ionic.sass.config.js"
}
}In detail you have to overwrite the ionic_sass config script. A good starting point is the original script.
Copy it for example to ./config/ionic.sass.config.js and add node_modules/@byteowls/ionic-hierarchical-menu/themes/scss to the includePaths property.
/**
* includePaths: Used by node-sass for additional
* paths to search for sass imports by just name.
*/
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
// add this line
'node_modules/@byteowls/ionic-hierarchical-menu/themes/scss'
]Note: It would be nices to just add the line instead of overwriting the whole file, because on every new version of the ionic-app-scripts you have to check for changes.
Now simply import the styles in your page.
page-example {
// overwrite component variables
// menu container
// menu item
$hierarchical-menu-text-color: $color4;
// separator
$hierarchical-menu-item-separator-color: $color4;
// active
$hierarchical-menu-active-text-color: $color2;
$hierarchical-menu-active-bg-color: $color4;
// hover
$hierarchical-menu-hover-text-color: $color4;
$hierarchical-menu-hover-bg-color: $color2;
@import "hierarchical-menu.themes.default";
.other-styles {
}
}Resources:
- https://ionicframework.com/docs/v2/resources/app-scripts/
- https://github.com/driftyco/ionic-app-scripts#custom-configuration
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {HierarchicalMenuModule} from '@byteowls/ionic-hierarchical-menu';
@NgModule({
imports: [
BrowserModule,
HierarchicalMenuModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule {
}This example show a menu page I use in a Ionic 2 project.
@Component({
selector: 'page-menu',
template: '<hierarchical-menu [config]="menuConfig"></hierarchical-menu>'
})
export class MenuPage {
menuConfig: HierarchicalMenuConfig;
constructor(
// ionic2 event bus
public eventBus: Events,
// ngx-translate translation service
public i18n: TranslateService) {
this.buildMenu();
}
buildMenu() {
// create the config object
this.menuConfig = new HierarchicalMenuConfig();
// the menu items are structured a flat list
this.menuConfig.menuItemStructure = "F";
// translate menu item titles using this callback
this.menuConfig.onTranslate = (code: string) => {
return this.i18n.instant(code);
};
// if there is a page assigned to the menu item send a navigation event
this.menuConfig.onClickLink = (item: HierarchicalMenuItem) => {
if (item.page) {
let navEvent = new NavEvent();
navEvent.page = item.page;
if (item.pageOptions) {
navEvent.options = item.pageOptions;
}
this.eventBus.publish(AppConstants.Event.NAV, navEvent);
}
};
// run this callback if the expander is clicked
this.menuConfig.onClickExpander = (item: HierarchicalMenuItem) => {
console.info("config: parent menu#"+item.id+" "+(item.expanded?"opened":"closed"));
// get all expanded item ids
console.log(this.menuConfig.getExpandedIds());
};
// add a parent menu item with a special style and expand it per default
this.menuConfig.add({title: "menu.personal.section", styleLine: "top-section", expanded: true});
// Add simple menu item with a reference to the parent. Because we said that items are delivered as flat list.
// The component will create the hierarchical structure by itself
this.menuConfig.add({title: "menu.personal.home", parentRef: "menu.personal.section", page: HomePage});
// Another menu item
this.menuConfig.add({title: "menu.personal.profile", parentRef: "menu.personal.section", page: ProfilePage});
// Another menu item with a index because its a tabbed page
this.menuConfig.add({title: "menu.personal.events", parentRef: "menu.personal.section", page: TabsPage, pageOptions: {tabIndex: 0}});
// A parent menu item
this.menuConfig.add({title: "menu.settings.section", styleLine: "top-section", expanded: true});
this.menuConfig.add({title: "menu.settings.language", parentRef: "menu.settings.section"});
for (let lang of ["de","en"]) {
this.menuConfig.add({title: "common.language." + lang, parentRef: "menu.settings.language", onClickLink: () => {
this.changeLanguage(lang);
}});
}
this.menuConfig.add({title: "menu.settings.feedback", parentRef: "menu.settings.section"});
this.menuConfig.add({title: "menu.settings.about", parentRef: "menu.settings.section"});
// use a special click callback for this menu item
this.menuConfig.add({title: "menu.settings.logout", parentRef: "menu.settings.section", onClickLink: ()=> {
this.logout();
}});
}It's also possible to load menu items after first init, e.g. from a backend service.
//
loadMenuItems() {
const ITEM_ID = "menu.chosen_club.section";
this.menuConfig.addBefore("menu.settings.section", { id: ITEM_ID, title: "Special section", expanded: true, styleLine: "special-section"});
// this is a
this.backendService.getMenuItems().subscribe(
(menuItems) => {
menuItems.forEach(i => {
if (i.parentRef == null) {
i.style = "top-section";
i.parentRef = ITEM_ID;
} else {
i.onClickLink = (item: HierarchicalMenuItem) => {
this.openRemoteMenuItemPage(item);
}
}
});
this.menuConfig.addArray(moduleMenuItems);
},
error => {
console.log(error);
}
);
}
}