web-dev-qa-db-ja.com

Ionic 2レスポンシブグリッド

Ionic 2？でレスポンシブグリッドを作成するにはどうすればよいですか？Ionic 1は、responsive-mdまたはresponsive-smグリッドが反応しましたが、Ionic 2。

私の場合、<ion-row> 3つの<ion-col>。表示幅がしきい値を下回ったときに、列がお互いの下に落ちるようにしたいと思います。 Ionic 2でこれを行うことは可能ですか？

ionic-frameworkionic2
13
vaer-k

Ionic 2のドキュメントには現在表示されていないようですが、responsive-md、responsive-sm（など）Ionic 1のクラスは、Ionic 2.の個々の属性になります。

次に例を示します。

  <ion-row responsive-sm>
    <ion-col width-10>This column will take 10% of space</ion-col>
  </ion-row>
24
Carson Ip

Ionic 2、Ionic 3+：

Ionicは flexbox cssに基づいた素晴らしいグリッドシステムを持っています。 docs で確認できます。
それを使用するには、そのように単純です：

<ion-grid>
  <ion-row>
    <ion-col col-3></ion-col> //This col will take 3/12 = 25% width;
    <ion-col col-4></ion-col> //This col will take 4/12 = 33.33% width;
    <ion-col></ion-col>       //This col will take the rest of width;
  </ion-row>
</ion-grid>
1
Duannx

Ionic is using Bootstrap grid system 。we can can usefixedattribute on ion -グリッドを使用して画面の幅をより有効に活用します。

要件に合わせて次のコードを使用してみました。コメントを理解してください。

ブレークポイントを上書きできるので、次のようにしました。

$grid-breakpoints: (
  sm: 0,
  ssm: 320px, // second small breakpoint
  tsm: 372px, // third small breakpoint. This is the threshold for high resolution devices. 
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 292px,
  ssm: 100%,
  tsm: 100%,
  md: 720px,
  lg: 960px
);

カスタマイズされたブレークポイントを使用したコードは次のとおりです。

 <ion-grid fixed>
      <ion-row>
        <ion-col col-2 col-tsm-2>
          1 of 3
        </ion-col>
        <ion-col col-10 col-tsm-6>
          2 of 3
        </ion-col>
        <ion-col col-4 Push-2 Push-tsm-0 col-tsm-4> // pushing 2 columns at the beginning for low resolution devices
          3 of 3
        </ion-col>
      </ion-row>
    </ion-grid>

低解像度のデバイス、つまりmin-width未満のデバイスの場合、次の出力が得られます。

enter image description here

上記のデバイスの次の出力：

enter image description here

1
Sandeep Sharma