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>
ionic-frameworkionic2ionic3
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内に配置するには、 documentation はitem-{modifier}を使用できることを示します。

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

例：

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

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

item-right＆item-left

25
robbannn