Comment ajouter tout élément html dans le matériau 2 Barre à collation

Question

Mon exigence est de montrer le fileur à l'intérieur de la barre collectrice de matériau 2.

Dans notre application, nous utilisons Snack bar pour afficher les messages de chargement, de réussite et d'erreur. Avec le message de chargement, je veux aussi afficher spinner. J'ai essayé d'ajouter div loader à l'intérieur de la barre de snack, mais il est rendu comme un texte pas comme élément HTML.

J'ai essayé d'ajouter avec la classe CSS, mais il est appliqué à l'ensemble de l'élément de la collation.

Je pense que si nous sommes en mesure d'insérer un autre élément html à l'intérieur de la barre de collation, nous pouvons alors montrer le chargeur avec le message.

Votre aide sera appréciée.

Answer 1

Quel type de centrifugeuse envisagez-vous d'utiliser?

Je voudrais jeter un oeil à Angular-Busy, je l'ai déjà utilisé et c'est très prometteur. En ce qui concerne html interne, je ne sais pas comment il est facile d'ajouter des éléments HTML internes. Je pense que le but principal est de montrer un peu d'information. Vous devriez peut-être envisager d'utiliser une alerte d'amorçage et la masquer jusqu'à ce que vous receviez un message d'erreur ou d'avertissement.

Malheureusement, la documentation angulaire de Material est pour le moins terrible.

Voici un exemple que vous pouvez utiliser pour une fileuse à l'intérieur d'une notification de Toast https://codepen.io/anon/pen/weyJVP

<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button>

Je parie que vous pouvez simplement définir une observable ou booléen à la valeur est active sur la fileuse en angulaire.

Bonne chance.