正確/最簡單的形式：在離子2中添加離子圖標按鈕到導航欄

Question

我正在離子圖標按鈕添加到離子導航欄中的離子2應用程序。

它工作正常，但此解決方案似乎相當冗長。

我想確認這是正確的/最簡單的一種表格/最佳實踐方法：

<ion-navbar> 
 
    <ion-title>Books</ion-title> 
 

 
    <ion-buttons end> 
 
    <button ion-button icon-only [navPush]="bookEditPage"> 
 
     <ion-icon name="add" color="navigation"></ion-icon> 
 
     </button> 
 
    </ion-buttons> 
 
</ion-navbar>

Answer 1

我想確認這是 正確/最簡單形式/最佳實踐方法。

這是完美:)

它可能看起來有點冗長，但代碼的每個部分都有它的目的。 <ion-buttons end>...</ion-buttons>將充當容器，將按鈕放置在正確的位置。

在這種情況下，你使用end，正如你可以看到this answer：

start和end遵循UI模式爲平臺

所以<ion-buttons start>將是對左側的iOS併成爲android右側第一個 按鈕。

<ion-buttons end>將在ios上的最後一個按鈕和 右側爲Android。

left/right提供作爲一種方式來超越。

然後該容器內，你只需要放置該按鈕，在這種情況下，裏面的圖標：

<button ion-button icon-only [navPush]="bookEditPage"> 
    <ion-icon name="add" color="navigation"></ion-icon> 
</button>