2017-07-13 7 views
1

イオン2のアプリでion-navbarにイオンアイコンボタンを追加します。正しいか簡単な形式:イオン2のnavbarにイオンアイコンボタンを追加する

正しく動作しますが、この解決策はかなり冗長に見えます。私はこれが正しい であることを確認したいと思います

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

+0

? – sebaferreras

答えて

0

:私はこれが正しい/最も簡単-フォーム/ベストプラクティスのアプローチであることを確認したいと思います

/最も単純な形式/ベストプラクティスのアプローチ。

それは:)

完璧だそれは少し冗長なように思えるかもしれないが、コードの各部分は、その目的を持っています。 <ion-buttons end>...</ion-buttons>は、適切な場所にボタンを配置するためのコンテナとして機能します。あなたがendを使用している。この場合

、そしてあなたがthis answerで見ることができるように:

startendので<ion-buttons start>は、iOS用の左側になりプラットフォーム

ためのUIパターンに従いますアンドロイド用の最初の ボタンになります。

<ion-buttons end>はiosの右側にあり、最後のボタンは のアンドロイドの権利になります。

left/rightは、それを乗り越える方法として提供されています。

そして、そのコンテナの内部で、あなただけの内側にアイコンで、この場合には、ボタンを配置する必要があります。これを解決するためにあなたができる

<button ion-button icon-only [navPush]="bookEditPage"> 
    <ion-icon name="add" color="navigation"></ion-icon> 
</button> 
関連する問題