Ionic 如何打开离子芯片中离子菜单？

khbbv19g 于 2022-12-09 发布在 Ionic

关注(0)|答案(1)|浏览(151)

我正在开发我的第一个应用程序，我很难打开一个离子芯片内的离子菜单。我不知道我的编程是否正确，如果它是一个错误，但我不能让它打开一个菜单。

<ion-chip color="dark" class="username" (click)="this.openFirst()">
      <ion-avatar>
        <img [src]="this.picture" />
      </ion-avatar>
      <ion-label>{{this.userDisplayName}}</ion-label>
      <ion-menu side="start" menuId="first" contentId="main" (click)="this.openFirst()">
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
    </ion-chip>

and ts

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

    constructor(private menu: MenuController) { }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

ionic-framework

来源：https://stackoverflow.com/questions/72532435/how-to-open-an-ion-menu-inside-an-ion-chip

1条答案

按热度按时间

thtygnil1#

答：没有办法把离子菜单放在离子芯片里面。应该放在“主”，在我的情况下，它是 Package 器。例如：

<ion-menu side="start" menuId="first" contentId="wrapper">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-button (click)="this.toggleFirst()">
          <ion-icon name="arrow-back"></ion-icon>
        </ion-button>
      </ion-buttons>
      

      <ion-title>Configurações</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item button>
        <ion-icon name="calendar" slot="start"></ion-icon>
        <ion-label>Alterar Data Nascimento</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="globe" slot="start"></ion-icon>
        <ion-label>Alterar Idioma</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="lock-closed" slot="start"></ion-icon>
        <ion-label>Alterar Senha</ion-label>
      </ion-item>
      <ion-item button (click)="this.openTutorial()">
        <ion-icon name="tv-outline" slot="start"></ion-icon>
        <ion-label>Tutorial</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="tv-outline" slot="start"></ion-icon>
        <ion-label>Contato</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="tv-outline" slot="start"></ion-icon>
        <ion-label>Sobre</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="tv-outline" slot="start"></ion-icon>
        <ion-label>Notificações</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="tv-outline" slot="start"></ion-icon>
        <ion-label>Posição Nacimento</ion-label>
      </ion-item>
      <ion-item button>
        <ion-icon name="log-out" slot="start"></ion-icon>
        <ion-label>Logout</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content id="wrapper">
  <div class="center-sea">
    <img class="sea" src="/assets/images/sea/sea-new.png" />
  </div>

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 如何打开离子芯片中离子菜单？

1条答案

相关问题

热门标签

最新问答