Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR SHELL

ionic

<ion-content>
  <ion-list lines="full">
    <ion-menu-toggle auto-hide="false" class="first-level">
      <ion-item [routerDirection]="'root'" [routerLink]="['/home']" (click)="clearLevel()">
        <ion-label><ion-icon name="home"></ion-icon>Home</ion-label>
      </ion-item>
    </ion-menu-toggle>
    <ion-item *ngFor="let p of appPages; let i=index;" [routerDirection]="'root'" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}">
      <ion-label>
        <ion-icon [name]="isLevel1Shown('idx'+i) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" slot="end"></ion-icon>
        {{p.name}}
        <ul *ngIf="isLevel1Shown('idx'+i)" class="level1">
          <li *ngFor="let i1 of p.item; let j=index;" (click)="toggleLevel2('idx'+i+'idx'+j)" [ngClass]="{active: isLevel2Shown('idx'+i+'idx'+j)}">
              <ion-icon [name]="isLevel2Shown('idx'+i+'idx'+j) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" slot="end"></ion-icon>
            {{i1.name}}
            <ul *ngIf="isLevel2Shown('idx'+i+'idx'+j)" class="level2">
              <li *ngFor="let i2 of i1.item; let k=index;" (click)="toggleLevel3('idx'+i+'idx'+j+'idx'+k)" [ngClass]="{active: isLevel3Shown('idx'+i+'idx'+j+'idx'+k)}">
                <ion-icon [name]="isLevel3Shown('idx'+i+'idx'+j+'idx'+k) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" slot="end"></ion-icon>
                {{i2.name}}
                <ul *ngIf="isLevel3Shown('idx'+i+'idx'+j+'idx'+k)" class="level3">
                  <li *ngFor="let i3 of i2.item; let l=index;" [routerLink]="[i3.url]">
                    <ion-menu-toggle auto-hide="false" class="first-level">{{i3.name}}</ion-menu-toggle>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
Source by www.djamware.com #
 
PREVIOUS NEXT
Tagged: #ionic
ADD COMMENT
Topic
Name
6+5 =