web-dev-qa-db-fra.com

Comment changer la largeur d'un Sidenav dans Angular Material Design?

Quelle que soit la taille d'écran que j'utilise, le Sidenav est toujours de la même taille. J'ai essayé d'ajouter des attributs tels que - flex - flex = "85" (pour obtenir 85% de son conteneur)

Je n'arrive pas à trouver une bonne approche.

cssangularjsangular-material
25
pierrebo

Dans angular, md-sidenav a ces attributs:

width: 304px;
min-width: 304px;

C'est pourquoi la largeur sera fixée à 304 px quel que soit l'appareil que vous utilisez. Donc, si vous voulez changer la largeur de votre sidenav, vous devrez changer un peu le CSS.

Si vous ne supportez que les navigateurs modernes, vous pouvez le changer en mesure vw (1/100e de la largeur de la fenêtre) et l'ajouter à un fichier CSS séparé. Le code ressemblera à ceci:

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
}

Voici un plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

37
user3587412

La réponse soumise par user3587412 m'a permis de changer la largeur mais j'avais le même problème que Craig Shearer avec ça tuant l'animation. J'ai donc essayé quelques choses différentes et j'ai trouvé ça.

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

Je ne sais pas si c'est la bonne façon mais cela a semblé fonctionner pour moi.

8
Trevor Glass

Grâce à user3587412 j'ai pu trouver facilement les styles souhaités. Pour que le md-sidenav s'adapte à un parent flexible, il suffit de remplacer

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 0px !important;
    width: auto !important;
    max-width: none !important;
}
7
Vector

Après avoir essayé différents CSS dans ce fil, je me retrouve avec:

md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

Je suis actuellement sur angular-material 1.0.8 et testé avec Chrome 50 seulement.

Avec ce CSS ce qui fonctionne pour moi:

  • Animation fermer et ouvrir OK
  • Une fois verrouillé OK
  • Lorsqu'il n'est pas verrouillé OK
5
Maxence