Ионная 2 чувствительная сетка

Как создать чувствительную сетку в Ionic 2? Ionic 1 поддерживал зарезервированные классы, такие как responsive-md или responsive-sm, которые делали сетки чувствительными, но они, похоже, не работают в Ionic 2.

В моем случае у меня есть <ion-row> с тремя <ion-col>. Я бы хотел, чтобы столбцы упали ниже друг друга, когда ширина дисплея упала ниже порогового значения. Возможно ли это сделать с помощью ионного 2?

Ответы

Ответ 1

Несмотря на то, что в настоящее время в документации 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>

Ответ 2

Теперь Ionic использует Систему сетки Bootstrap. Мы также можем использовать атрибут фиксированный на ионной сетке, чтобы лучше использовать ширину экрана.

Я попытался использовать следующий код для своих требований. Пожалуйста, следуйте комментариям для понимания.

Мы можем переопределить точки останова, поэтому я сделал это:

$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>

Вы получите следующий вывод для устройств с низким разрешением, например, устройств с минимальной шириной: 372px;

И следующий вывод для следующих устройств:

Ответ 3

Обновление для Ionic 2, Ionic 3 +:

Ионные теперь имеют удивительную систему сетки на 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>