जब आयन मेनू आयोनिक 5 में खोला जाता है कोणीय उपयोग कर किसी भी div या लेख छुपाएं

वोट
0

मैं उपकरण पट्टी छुपाना चाहते हैं .custom-nav-linkdiv जब आयनिक पक्ष मेनू खोलें और फिर यह दिखा जब पक्ष मेनू बंद कर दिया है होगा। कैसे पर आयन मेनू खुला है या बंद आधारित का पता लगाने और HTML में शर्तें लागू करने के लिए?

यहाँ

<ion-toolbar>
  <div class=containers>
    <div class=logo >
      <h4>My Toolbar</h4>
    </div>

    <div class=custom-nav-link slot=end>
      <nav class=desktop-nav>
        <ul class=nav-list>
          <li *ngFor=let p of buttonLinks>
            <a href=>{{p.title}}</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class=>
      <ion-buttons slot=start>
        <ion-menu-button menu=userMenu>
          <ion-icon name=apps></ion-icon>
        </ion-menu-button>
      </ion-buttons>
    </div>

  </div>
</ion-toolbar>
14/02/2020 को 00:03
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
0

आप MenuController के लिए उपयोग कर सकते हैं कि

import { MenuController } from '@ionic/angular';

constructor(public menuCtrl:MenuController){}

HTML में

<ion-toolbar>
  <div class="containers">
    <div class="logo" >
      <h4>My Toolbar</h4>
    </div>

    <div *ngIf="!menuCtrl.isOpen('menuId')" class="custom-nav-link" slot="end">
      <nav class="desktop-nav">
        <ul class="nav-list">
          <li *ngFor="let p of buttonLinks">
            <a href="">{{p.title}}</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="">
      <ion-buttons slot="start">
        <ion-menu-button menu="userMenu">
          <ion-icon name="apps"></ion-icon>
        </ion-menu-button>
      </ion-buttons>
    </div>

  </div>
</ion-toolbar>
14/02/2020 को 07:55
का स्रोत उपयोगकर्ता

वोट
0

इसे इस्तेमाल करे:

import { MenuController } from '@ionic/angular';

public isMenuOpen: boolean = false;

constructor(public menuCtrl:MenuController){}

ngOnInit() {   // or on click of menu button
    this.menuCtrl.isOpen('userMenu').then(res => {
        this.isMenuOpen = res;
    })
}

और html

<div *ngIf="!isMenuOpen" class="custom-nav-link" slot="end">
  <nav class="desktop-nav">
    <ul class="nav-list">
      <li *ngFor="let p of buttonLinks">
        <a href="">{{p.title}}</a>
      </li>
    </ul>
  </nav>
</div>

<div class="">
  <ion-buttons slot="start">
    <ion-menu-button menu="userMenu">
      <ion-icon name="apps"></ion-icon>
    </ion-menu-button>
  </ion-buttons>
</div>
15/02/2020 को 00:49
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more