ionicのgridで楽々reverse

はじめに

どうも！
今回はionic4で開発をしていてこれはちょっといいなと思った機能をご紹介します
ion-wrap-reverseってご存知ですか？
こいつ痒いところに手が届く機能なんです。

ion-wrap-reverseとは

使い方としてはこう

<ion-content>
  <ion-grid>
    <ion-row class="ion-wrap-reverse">
      <ion-col size="12" size-sm>
        <ion-button color="primary">上だったのに</ion-button>
      </ion-col>
      <ion-col size="12" size-sm>
        <ion-button color="danger">下だったのに</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

ion-gridに class="ion-wrap-reverse"を追加すると
設定したsizeに合わせてレスポンシブ対応をするんですが、
上下逆になってくれるんです！
cssでも flex-wrap: wrap-reverse;を使えばいけますが
class="ion-wrap-reverse"の方が楽チンで好きですw

デモ

終わりに

ion-wrap-reverseの様なionic特有のクラスっていっぱい有りそうなので
次の記事でまとめやりたいなぁと思います。