Discussion :

[olivier252]

Salut,

Je travaille avec la librairie angular material en ce moment et je cherche à avoir un comportement du format mobile au format desktop :
Concretement :
- En format desktop je souhaite afficher une image
- En format mobile, cette image disparait mais un lien permet évetuellement de l'afficher

Comment gérer ce genre de comportement ? Merci

[krakatoa]

il existe plusieurs systèmes de grid (grille) pour le responsive. bootstrap, angular material....

pour ma part, j'utilise le système de grid qu'est flexbox et gridcss
qui sont 2 systèmes qui sont intégrés dans les principaux navigateurs (sauf IE, RIP)
ce qui fait qu'on a pas besoin de télécharger la librairie pour l'utiliser puisqu'il est incorporer dans le navigateur.

- flexbox est spécialisé pour gérer les flux (liste d'élément)
- gridcss est spécialisé dans la construction d'un gabarit (header, content...)


exemple flexbox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
      .box {
          display: flex;
          flex-direction: row-reverse;
        }

mais comme on fait de l'angular, il existe un package très pratique :
https://github.com/angular/flex-layout

au lieu d'écrire du css, on utilise le flexbox sous forme de directive comme ça on peux profiter du coté dynamique:

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div fxLayout="row" fxLayoutAlign="space-around center" >

sur ce site :
https://tburleson-layouts-demos.firebaseapp.com/#/docs

tu coches le type de flux que tu souhaites obtenir et il te donnes quoi mettre


concernant le responsive : mobile, tablette, ordi
il existe des directives pour gérer ça facilement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10

      <button
        mat-button
        [fxShow]="false"                      //  Desktop -> n'apparait pas
        [fxShow.xs]="true"                   // Mobile -> apparait
        [fxShow.sm]="true"                  // Tablet->apparait
      >
       mon bouton
      </button>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 [fxShow.sm]="showOnTablet" 
...
...
showOnTablet = true;                //   on peut modifier par code suivant des condition la présence ou pas sur tablette

ça prends peut être 2-3 heures pour te former sur flexbox et pareil pour gridcss
simple et efficace !
une fois adopté tu ne pourras plus t'en passer

[olivier252]

Ah ok, effectivement j'utilise quelquefois flex box dans des projets de sites webs classiques (js), mais je ne savais pas que l'on pouvait intégrer flex box dans une directive. Ton lien à l'air super cool !

Pour le responsive, est-ce que tu aurais également un petit lien que je fasse le tour des propriétés ?
Merci !

[krakatoa]

https://github.com/angular/flex-layo...nsive-features


on peut meme changer le style ou la classe en fonction

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>

[olivier252]

Ok, merci encore, je vais eclaircir tout ça !

Par contre, je viens de tester après avoir téléchargé le package flex-layout, et je n'ai pas le comportement attendu :
mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div fxLayout="row" fxLayoutAlign="space-around center" > 
    <mat-icon *ngIf="!isHomePage">arrow_back</mat-icon>
    <!-- <img class="position-logo" src="assets/img/logo-pr-redim.png" alt=""> -->
    <p class="header-notification">{{ msgHelper }}</p>
</div>

Qu'est-ce qui coince là-dedans ?

edit : arg, j'ai rien dit, j'ai oublié l'import !!

[krakatoa]

ça m'est arrivé d'oublier l'import !

voici un petit article :

https://medium.com/ngconf/angular-fl...t-ddf1c8fad37e

si tu n'es pas fort in english, tu peux faire la traduction de page. c'est correct et compréhensibles comme traduction

[olivier252]

Yop merci mille fois !