Ionic 2 Android工具欄按鈕疊加

我想在我的離子2應用程序的最右側添加三個按鈕。Ionic 2 Android工具欄按鈕疊加

它在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>

我認爲這可能與菜單按鈕有關，但刪除它並沒有改變任何東西。任何幫助，將不勝感激。謝謝！

來源

2017-02-02 L. Baird

離子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

來源

2017-02-03 12:28:19

完美地工作，非常感謝你！我發現奇怪的是，在Google搜索中找不到這樣的東西，人們會認爲這會是一個常見的問題。 –

這裏是一個非常簡單的修復！，based on this。

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

然後，你會看到兩個ios和android一致對齊。

來源

2017-11-18 14:24:25 Ftalem

Ionic 2 Android工具欄按鈕疊加

回答

相關問題