Απόκρυψη κάθε div ή κείμενο, όταν ιόντων μενού ανοίγει στο Ιωνικό 5 χρησιμοποιώντας γωνιακής

Question

Απόκρυψη κάθε div ή κείμενο, όταν ιόντων μενού ανοίγει στο Ιωνικό 5 χρησιμοποιώντας γωνιακής

ψήφοι

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>

angular ionic-framework ionic4 ionic-native

Δημοσιεύθηκε 13/02/2020 στις 22:03
πηγή χρήστη Md. Ikbal Hossen

Σε άλλες γλώσσες...

2 απαντήσεις

kathirpandian · Answer 1 · 2020-02-14 05:55

Μπορείτε να Χρησιμοποιήστε 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>

yatinsingla · Answer 2 · 2020-02-14 22:49

Δοκιμάστε αυτό:

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>