Кнопки панели инструментов Ionic 2 Android Stacking

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 навигационная панель/панель инструментов имеет последовательность позиционирования на ней, начиная с 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.