CODEWITHSUNDEEP
angularionic2
srujana
srujana

Reputation: 453

How to add sub items in sidemenu in ionic2?

rootPage: any = DashboardPage;
  pages: Array<{ title: string, component: any, icon: any, color: any, iconcolor: any }>;
 this.pages = [
        { title: 'Dashboard', component: DashboardPage, icon: "md-stats", color: "", iconcolor: "primary" },
        { title: 'Branches', component: BranchPage, icon: "md-home", color: "", iconcolor: "" },
        { title: 'Staff', component: DoctorPage, icon: "md-medkit", color: "", iconcolor: "" },
        { title: 'Patients', component: ViewrecordsPage, icon: "md-clipboard", color: "", iconcolor: "" },
        { title: 'Expenses', component: AdmineexpensesPage, icon: "md-cash", color: "", iconcolor: "" },
        { title: 'Appointments', component: AdmineappointmentsPage, icon: "md-list-box", color: "", iconcolor: "" },
        { title: 'Transactions', component: TransactionsPage, icon: "md-swap", color: "", iconcolor: "" },
        { title: 'Doctors History', component: AdmindoctorsPage, icon: "ios-medical", color: "", iconcolor: "" },
        { title: 'Promotional SMS', component: PromotionalSmsPage, icon: "ios-medical", color: "", iconcolor: "" }
      ];
<ion-split-pane when="md">
    <ion-menu [content]="content">

        <ion-header>
            <ion-toolbar>
                <ion-title>{{gmaildata.displayName}}</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content class="no-scroll">
            <ion-list>
                <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" style="padding-left:5px" [style.color]="p.iconcolor === 'primary'?'#488aff':''">
                    <ion-icon [name]="p.icon" item-left color="{{p.iconcolor}}"></ion-icon> {{p.title}}
                </button>
            </ion-list>
        </ion-content>

    </ion-menu>
    <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>
</ion-split-pane>

I am working on ionic2 project.Here I have created a sidemenu with some items without using tab.But now I have a requirement of creating subitems to the sidemenu.Here is my code: How can Implement sub items to the sidemenu without using side-menu-content tab in ionic2?

Upvotes: 0

Views: 928

Answers (1)

Prithivi Raj
Prithivi Raj

Reputation: 2736

You can create sub menu's for main menu using CSS properties and angular conditions. On clicking on the main menu, sub menus will display (using angular conditions) with some padding (using css properties). PFB the sample code. working version

app.html

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list id="sidenav">
      <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item-group submenu [class.visible]="showSubmenu">
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
  </ion-item-group>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

app.component.ts

showSubmenu: boolean = false;

menuItemHandler(): void {
  this.showSubmenu = !this.showSubmenu;
}

app.scss

#sidenav {
  ion-item-group[submenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    padding-left: 20%;
    &.visible {
        height: inherit;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}

Upvotes: 2

Related Questions