web-dev-qa-db-fra.com

Ionic 2 grille sensible

Comment créer une grille réactive dans Ionic 2? Ionic 1 prenait en charge les classes réservées telles que responsive-md ou responsive-sm qui rendaient les grilles réactives, mais elles ne semblaient pas fonctionner dans Ionic 2.

Dans mon cas, j'ai un <ion-row> avec trois <ion-col>. Je voudrais que les colonnes tombent en dessous les unes des autres lorsque la largeur d'affichage tombe en dessous d'un seuil. Est-il possible de faire cela avec Ionic 2? 

ionic-frameworkionic2
13
vaer-k

Bien que cela ne semble pas apparaître actuellement dans la documentation Ionic 2, les classes responsive-md, responsive-sm (etc.) dans Ionic 1 deviennent désormais des attributs individuels dans Ionic 2.

Voici un exemple:

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

Maintenant, Ionic utilise Système de grille Bootstrap . Nous pouvons également utiliser l'attribut fixed sur ion-grid pour mieux utiliser la largeur de l'écran.

J'ai essayé en utilisant le code suivant pour mes besoins. Veuillez suivre les commentaires pour comprendre.

Nous pouvons remplacer les points d'arrêt, alors j'ai fait ceci:

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

et voici le code utilisant un point d'arrêt personnalisé:

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

Vous obtiendrez la sortie suivante pour les périphériques basse résolution, c’est-à-dire les périphériques dont la largeur est inférieure à la largeur minimale: 372 pixels;

 enter image description here

Et sortie suivante pour les périphériques ci-dessus:

 enter image description here

1
Sandeep Sharma

Mise à jour pour Ionic 2, Ionic 3+:

Ionic a maintenant une base système incroyable sur flexbox css. Vous pouvez voir dans les docs .
Pour l'utiliser, c'est aussi simple que ça:

<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>
0
Duannx