web-dev-qa-db-fra.com

Est-il possible de positionner un $ mdToast en haut de la page pour une fenêtre étroite?

J'aimerais avoir un toast avec les messages du site (comme la notification de réussite ou d'erreur sur la dernière action) affichés en haut de la page.

Matériau angulaire docs dire vous pouvez placer un toast en haut:

position - {string =}: Où placer le pain grillé. Disponible: toute combinaison de 'bas', 'gauche', 'haut', 'droite'. Par défaut: 'en bas à gauche'.

La position haute fonctionne très bien pour les navigateurs de bureau dont la largeur est supérieure ou égale à 960 px, mais est ignorée lorsque la largeur est réduite (le pain grillé est toujours en bas). Pourquoi? Et sur les appareils mobiles, il est également toujours en bas.

angularjsmaterial-designangular-material
9
Artem Vasiliev

Donc, apparemment, Angular Material (pris en charge par la version 1.1.0.rc1) ne prend pas en charge les écrans dont la largeur est inférieure à 960 pixels, mais nous pouvons utiliser une solution de contournement comme celle-ci:

<body ng-app="myApp">
  <div layout-fill>
    <md-toolbar ng-cloak>
      <div class="md-toolbar-tools">
        <md-button>My app</md-button>
      </div>
    </md-toolbar>
    <div id="toaster"></div>
    <md-content id="content" ng-cloak>
      ...
    </md-content>
  </div>
</body>

CSS:

#toaster {
  position: fixed;
  top: 56px;
  height: 48px;
  left: 0;
  width: 100%;
  z-index: 10000;
}

JS:

$mdToast.show($mdToast.simple()
  .textContent('hello!')
  .parent(document.querySelectorAll('#toaster'))
  .position('top left')
  .hideDelay(false)
  .action('x'));

Résultat: http://screencast.com/t/B1U8aXaFcd

Cela gardera également le pain grillé à sa position lorsque la page est défilée. Mais avec cette solution, la peau animée continuera à déplacer le message vers le bas, pas vers le haut. Dans mon projet réel, je n'ai finalement pas lutté contre MD et le pain grillé en bas, mais j'utilise cette approche pour conserver sa position lors du défilement de la page.

7
Artem Vasiliev

Selon le Google Material Design docs (mes points forts):

Les barres de collation fournissent un retour d'information léger sur une opération en affichant un bref message en bas de l'écran. Snackbars peut contenir une action.

Si regarder dans le angular-material.css (selon v.1.0.5):

@media (max-width: 959px) {
  md-toast {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
    bottom: 0; 
  }
  ...
}

Vous ne pouvez pas placer un toast sur des écrans dont la largeur est inférieure à 960 px (en raison de la marge bottom: 0), car l'équipe de angular-material vient d'implémenter les spécifications qui ne définissent pas cette possibilité. 

Essayez d’étendre/écraser le css afin d’y parvenir.

3
iulian

Voici une solution CSS:

@media (max-width:959px) {
  md-toast {
    bottom: unset !important;
  }
}

J'espère que cela t'aides.

2
Edmond Woychowsky

Essaye ça:

HTML:

<body layout="column">
<!-- body ---> 
</body>

CSS:

body {
   overflow-y: hidden !important;
}
0
Marcelo C.