이오니아 2 안드로이드 툴바 버튼이 스태킹되고 있습니다

Question

필자는 이오닉 2 응용 프로그램의 맨 오른쪽에 3 개의 버튼을 추가하려고합니다.

크롬 브라우저와 iOS에서 잘 작동하지만 안드로이드에서는 두 개의 버튼이 쌓이면 상관 없습니다. 내가 <ion-buttons end>의 세 가지를 모두 넣으면

나는 이 얻을 : 내가 <ion-buttons end>에서 처음 <ion-buttons start> 두 하나를 넣어하려고하면

나는이 얻을 : 는

비슷한 일을하면 어떻게됩니까을 나는 <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

ionic 2 navbar/toolbar에는 0에서 7까지의 숫자가 표시됩니다. docs 하단으로 이동하여 ios 및 android scss 변수에서 확인하십시오.

그래서 그들은 다음과 같이 이동 :

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

:

$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,) 

그래서 당신이해야 할 어떤 버튼,을 시작 끝이 같은 바로을 속성을 사용하여 주문에 따라입니다

희망 하시겠습니까? D

Answer 2

다음과 같습니다. 아주 쉬운 해결 !, based on this.

사용하는 대신 start 및 사용 right 대신 다음 end

의 left, 당신은 ios 및 android 모두에서 일관된 정렬을 볼 수 있습니다.