Angular material et responsive

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

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:

---

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:

---

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:

---

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:

---

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

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 !

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


on peut meme changer le style ou la classe en fonction

Code:

---

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

---

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:

---

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

ç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

Yop merci mille fois !