Question

我正在尝试在最右侧添加三个按钮到我的Ionic 2应用程序。

它在Chrome浏览器和iOS上运行得很好，但是，在Android上，无论我做什么，两个按钮都会叠加。

如果我将所有三个放入<ion-buttons end>我得到这个：

如果我尝试将前两个放在<ion-buttons start>中，将一个放在<ion-buttons end>中，我会得到：

如果我将<ion-buttons start>中的一个放入<ion-buttons end>

中，则会发生类似情况

这是我的标题HTML：

<ion-header>
    <ion-navbar color="primary">
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>Cobblestone</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openSearch()">
          <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button icon-only (click)="openLocations($event)">
          <ion-icon name="pin"></ion-icon>
      </button>
      <button ion-button icon-only (click)="openCart()">
          <ion-icon name="cart"></ion-icon>
      </button>
     </ion-buttons>
  </ion-navbar>
</ion-header>

我认为它可能与菜单按钮有关，但删除它并没有改变任何东西。任何帮助，将不胜感激。谢谢！

Answer 1

离子2导航栏/工具栏上有一系列定位itens，从0到7.转到docs的底部并在ios和android scss变量上检查它。

所以他们这样：

$toolbar-order-md: (
  back-button: 0,
  menu-toggle-start: 1,
  buttons-left: 2,
  content: 3, 
  buttons-start: 4,
  buttons-end: 5,
  buttons-right: 6,
  menu-toggle-end: 7, )

所以你需要做的是按照按钮顺序使用属性开始，结束和正确，如下所示：

<ion-buttons start>
     <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
     </button>
 </ion-buttons>
 <ion-buttons end>
     <button ion-button icon-only>
         <ion-icon name="pin"></ion-icon>
     </button>
 </ion-buttons>
 <ion-buttons right>
     <button ion-button icon-only>
         <ion-icon name="cart"></ion-icon>
     </button>
 </ion-buttons>

希望它有所帮助：D

Answer 2

这是一个非常简单的修复！，based on this。

使用left代替start 和使用right代替end

然后，您会在ios和android上看到一致的对齐方式。

Ionic 2 Android工具栏按钮正在堆叠

2 个答案: