Правильное выравнивание для кнопки в ионной колонке

У меня есть эта сетка в моем приложении 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>

Ответы

Ответ 1

В вашем случае вы можете добавить атрибут float-right следующим образом:

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

float- {} модификатор
В документации говорится, что вы можете добавить атрибут float-{modifier} для размещения элемента внутри его контейнера.

{modifier} может быть любым из следующих:
right: элемент будет плавать с правой стороны своего контейнера.
left: элемент будет плавать с левой стороны контейнера.
start: то же самое, что и float-left, если направление слева направо, и float- справа, если направление справа налево.
end: то же, что float- вправо, если направление слева направо, и float- влево, если направление справа налево.

Пример:

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

item- {} модификатор
Чтобы разместить элемент внутри ion-item, в документации говорится, что вы можете использовать item-{modifier}.

Где {modifier} может быть любым из следующих:
start: размещается слева от всех других элементов, вне внутреннего элемента.
end: помещается справа от всех других элементов, внутри внутреннего элемента, снаружи входной оболочки.
content: помещается справа от любой ионной этикетки внутри входной обертки.

Пример:

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

Deprecation
Согласно документации эти имена устарели:

item-right & item-left

Новые имена:

  • item-start & item-end
  • padding-start & padding-end
  • margin-start & margin-end
  • text-start & text-end
  • start и end для FAB