2017-07-21 10 views
7

私のイオン2アプリケーションにこのグリッドがあります。列(行)の右側にボタンを表示するためのイオン固有の属性はありますか?ion-colourのボタンの右揃え

<button ion-button float-right>My button</button> 

フローティング状態{修飾子}
documentationあなたはその内の要素を配置する属性float-{modifier}を追加することができます言う:そうは次のようにあなたが属性float-rightを追加することができ、あなたの場合は

<ion-grid> 
    <ion-row> 
    <ion-col>col 1</ion-col> 
    <ion-col>col 2</ion-col> 
    </ion-row> 
    <ion-row> 
    <ion-col> 
     <button ion-button>My button</button> 
    </ion-col> 
    </ion-row> 
</ion-grid> 

答えて

7

コンテナ。
right

{modifier}は、次のいずれかの要素が、そのコンテナの右側にフロートします。
left:要素は、そのコンテナの左側に浮動します。
start:方向が左から右の場合はfloat-leftと同じで、方向が右から左の場合は浮動小数点です。
end:方向が右から左の場合は、左から右、浮動小数点の場合はfloat-rightと同じです。

例:

<div> 
    <button ion-button float-right>My button</button> 
</div> 

アイテム - {修飾子}
documentationあなたがitem-{modifier}を使用することができると言うion-item内部素子を位置決めします。
start{modifier}は、以下のいずれかであることができる

インナーアイテムの外に、他のすべての要素の左側に配置。
end:入力ラッパーの外側の内側の項目の内側にある他のすべての要素の右側に配置されます。
content:入力ラッパーの内側にあるイオンラベルの右側に配置します。

例:

<ion-item> 
    <button ion-button item-end>My button</button> 
</ion-item> 

廃止
documentationによると、これらの名前は推奨されません:

item-right & item-left

+0

それがうまく働きました。私はitem-rightを試していたが、うまくいかなかった。違いを知っていますか? – Hamed

+0

'item-right'がもう使用されているかどうかわかりませんが、私の推測では' float-right'がその代用品です。カンツは、ドキュメント内の「アイテム右」について何かを見つけます。 – robbannn

+0

'item-right'は、' ion-item'の中に要素を配置するように動作します。だから、アイテムの中にボタンを置いたり、ラジオアイテムのアイコンを右に置いたりしたいのであれば、いつでも 'ion-item'を使うことができます。しかし、それは 'イオンアイテム'の外で動作しません。 Btwは 'float-right'属性のために@robbannnに感謝しました。私はそれを全く知らなかった: – sebaferreras