web-dev-qa-db-ja.com

ion-colのボタンの右揃え

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

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

あなたの場合、次のように属性float-rightを追加できます:

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

float- {modifier}
documentation は、属性float-{modifier}を追加して、コンテナ内に要素を配置できることを示しています。

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

例:

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

item- {modifier}
要素をion-item内に配置するには、 documentationitem-{modifier}を使用できることを示します。

{modifier}は次のいずれかです。
start:他のすべての要素の左側、内側のアイテムの外側に配置されます。
end:他のすべての要素の右側、内側のアイテムの内側、入力ラッパーの外側に配置されます。
content:イオンラベルの右側、入力ラッパー内に配置されます。

例:

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

非推奨
documentation によれば、これらの名前は非推奨です。

item-rightitem-left

25
robbannn