Angulaire 2, le Progrès Matériel Spinner: affichage de superposition
Comment afficher l'angle de 2 Progrès Matériel Spinner un peu superposition transparente de la vue actuelle (une page ou une boîte de dialogue modale)?
Vous devez vous connecter pour publier un commentaire.
J'ai été inspiré par: Primordial Angulaire de la Taille d'un Matériau et le Style de md-dialogue-conteneur
Je l'ai résolu comme ceci:
Créer un Nouveau Composant
Créer un nouveau composant ProgressSpinnerDialogComponent
Le contenu de progress-spinner-dialog.component.html:
Le contenu de progrès-spinner-boîte de dialogue.composante.ts:
Ajouter un Style
Dans les styles.css ajouter:
Utiliser le Composant
Ici un exemple d'utilisation de la progression spinner:
L'ajouter à l'application.module
Utiliser le code ci-dessous pour obtenir l'opacité de la
HTML
COMPOSANT
CSS
DÉMO
spinner
composant; le "HTML" est ce que contient lespinner
composant.Basé sur l'approche Un peu différente: Deux composants, le premier pour ouvrir la boîte de dialogue, la seconde est la boîte de dialogue. Dans le composant que vous voulez montrer le spinner juste ajouter:
<app-dialog-spinner *ngIf="progressSpinner"></app-dialog-spinner>
Et de contrôle de l' *ngIf dans votre logique. Ci-dessus est tout ce que vous devez appeler le compteur de sorte que le composant reste belle et propre.
Dialogue spinner composant:
Déclarer les composants de votre module et bien sûr vous inscrire
DialogSpinnerDialogComponent
dans votre entryComponents. Ajouter les propriétés css pour un parent de la feuille de style. Cela peut sans doute être amélioré, mais je suis un peu pressé par le temps.