Ionic2/3 - biểu tượng nút tiêu đề có kích thước khác nhau, sau đó nút quay lại tự động

Question

Tôi đang sử dụng nút tự động 2/3 của Ionic khi sử dụng NavController.

Trên một trong những trang tôi muốn thêm nút vào tiêu đề, mà sẽ thay đổi một cái gì đó, vì vậy tôi đã thêm nó:

<ion-header> 
    <ion-navbar color="orange"> 
    <ion-title>Test</ion-title> 
    <ion-buttons end> 
     <button ion-button icon-right clear (click)="openModal()"> 
     Next <ion-icon name="arrow-forward"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

Thật không may, kích thước của biểu tượng là hơi khác nhau (nhỏ hơn) sau đó Nút quay lại được thêm tự động bởi Ionic. Tôi biết rằng tôi có thể tạo kiểu cho nó bằng CSS nhưng tôi sợ phá vỡ một thứ gì đó (tôi không thể kiểm tra tất cả các thiết bị).

Ảnh chụp màn hình (cả Android & iOS):

Có lẽ tôi nên sử dụng lớp nút khác nhau hoặc các thành phần? Làm cách nào để tôi có thể làm cho kích thước của tất cả các nút & các biểu tượng trong tiêu đề giống nhau?

Answer 1

Bạn có thể sử dụng chỉ thị biểu tượng chỉ và đó là tất cả. Bằng cách này là nút quay lại.

<ion-buttons end> 
    <button ion-button icon-right icon-only clear (click)="openModal()"> 
     Next <ion-icon name="arrow-forward"></ion-icon> 
    </button> 
</ion-buttons> 

Answer 2

Bạn chỉ cần tăng font-size của icon như được hiển thị bên dưới.

Lưu ý: Do đó bạn đang làm điều này trong scss tập tin của trang của bạn nó sẽ không phá vỡ bất kỳ kiểu mặc định khác.

của bạn-page.scss

.icon[name="arrow-forward"] { 
     font-size: 2.4rem;; //same size of the default back button 
    } 

Kết quả:

Answer 3

Thêm một lớp học vào biểu tượng của bạn.

<ion-icon name="arrow-forward" class="next-button"></ion-icon> 

Tham khảo mã nguồn ion để biết chính xác CSS rules for the back button. Sau đó, thêm kiểu tùy chỉnh của bạn cho phù hợp.

ion-icon.next-button.icon-ios { 
    min-width: 18px; 
    font-size: 3.4rem; 
    padding-left: inherit; 
    text-align: right;  
    display: inline-block; 
} 

ion-icon.next-button.icon-md { 
    margin: 0; 
    padding: 0 6px; 
    text-align: right; 
    font-size: 2.4rem; 
    font-weight: normal; 
}