Afin d’optimiser vos applications pour une utilisation via tablettes et mobiles, vous devez veiller à les tester dans les différentes résolutions que propose la plateforme.
Les résolutions
La plate-forme utilise le framework CSS Bootstrap pour gérer les résolutions d’écrans :
- Smartphone en mode portrait : écrans inférieurs à 576 px
- Smartphone en mode paysage : écrans jusqu’à 768 px
- Tablettes : écrans jusqu’à 992 px
- Écrans 1 : écrans jusqu’à 1200 px
- Écrans 2 : écrans supérieurs à 1200 px
Vous pouvez simuler une résolution directement en mode Création grâce au Switcher présent en haut à droite.
Manipuler les composants
Attention : pour bénéficier du paramétrage qui suit, vos composants doivent être :
- soit dans un grille réactive
- soit dans un formulaire
Chaque composant peut être paramétré de manière autonome dans l’écran.
Régler la largeur de vos composants
Comme pour Bootstrap, chaque grille réactive ou formulaire est décomposé en 12 colonnes. Vous devez attribuer une largeur comprise entre 1 et 12, ou utiliser Automatique.
Automatique : répartit automatiquement la largeur des éléments sur la ligne.
Exemple :
- Si vous mettez un composant en automatique sur une ligne, ce dernier prendra tout l’espace de la grille réactive disponible.
- Si vous mettez deux composants en automatique sur une ligne, ces derniers prendront chacun 50% de la grille réactive.
- si vous mettez un composant avec une largeur de 3, la largeur prendra 25 % de la grille réactive. Vous pouvez placer 4 éléments sur cette ligne.
- si vous mettez un composant avec une largeur de 6, la largeur prendra 50 % de la grille réactive. Vous pouvez placer 4 éléments sur cette ligne.
- etc.
Régler la visibilité de vos composants
Vous pouvez choisir de cacher certaines données quand la résolution devient trop petite. Pour cela, utiliser le Switcher de visibilité :
Bon développement,
