首页 文章

Ionic2:菜单按钮内的图标被剪切

提问于
浏览
1

我导入一个示例应用程序(菜单)并在菜单中添加了带图标和文本的按钮:

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item-divider></ion-item-divider>
      <button ion-item icon-left (click)="logout()">
        <ion-icon name="log-out"></ion-icon>
        Logout
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

可悲的是,这导致了一个未完全显示的图标(我在Chrome中测试我的应用)

enter image description here

1 回答

  • 5

    你必须在ion-icon使用属性item-left

    <ion-menu [content]="content">
    
      <ion-header>
        <ion-toolbar>
          <ion-title>Pages</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <ion-content>
        <ion-list>
          <ion-item-divider></ion-item-divider>
          <button ion-item icon-left (click)="logout()">
            <ion-icon item-left name="log-out"></ion-icon>
            Logout
          </button>
        </ion-list>
      </ion-content>
    
    </ion-menu>
    
    <ion-nav #content [root]="rootPage"></ion-nav>
    

相关问题