3
votes

texte à l'intérieur de la barre de progression du tapis en matériau angulaire

Dans la barre de progression du tapis, je dois afficher le texte à l'intérieur de la barre de progression et ne valoriser aucun autre pourcentage. quelqu'un peut-il aider à afficher du texte dans la barre de progression?

<mat-progress-bar mode="determinate" class="progress-bar" [color]="color " [value]="progress" ></mat-progress-bar>

angular angular-material

1 commentaires

regardez cette réponse stackoverflow.com/questions/46365836/...

5 Réponses :

3
votes

Vous devez le créer manuellement car il n'est pas disponible dans le matériau 2.x

Solution:
Vous pouvez placer le <md-progress-spinner> dans un <div> et ajouter un autre <div> intérieur pour afficher le texte et ajuster la position manuellement.

<div>
<md-progress-spinner [color]="color" 
                     [mode]="mode" 
                     [value]="value" aria-label="Rating" 
                     mode="determinate">
</md-progress-spinner>
<div style="position:relative; top: -60px; left: 30px;">
    {{ showText }}
</div>

J'espère que cela résout votre question.

Exemple de travail: cela peut vous aider, j'ai trouvé sur SO uniquement

0 commentaires

0
votes

Je ne pense pas que vous puissiez configurer avec la barre de progression du matériel existante, vous devez trouver votre propre façon de l'implémenter en ajoutant un div avec votre style personnalisé comme suit,

<mat-progress-spinner
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value">        
    </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;"> Loading </div>
 </mat-card-content>

DÉMO STACKBLITZ

0 commentaires

2
votes

Vous pouvez utiliser css pour ce faire. De cette façon, votre contenu est toujours dans la barre de progression centralisée . La seule condition est que la width et la height du mat-progress-spinner soient les mêmes que le div parent:

<div style="position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
  <mat-progress-spinner style="width: 100px;height: 100px;position: absolute;top: 0;left: 0;" [color]="'primary'" [mode]="'determinate'" [value]="60">
  </mat-progress-spinner>
  <h1 >69%</h1>
</div>

3 commentaires

En quoi est-ce différent de la réponse donnée par @ user10549656?

@SmrtGrunt dans sa solution, le contenu était centralisé manuellement à l'aide des attributs supérieur et gauche. donc si la taille du contenu change, peut-être qu'il quittera le centre.

Je l'ai. Veuillez vous assurer que cette distinction est prise en compte dans votre réponse.

2
votes

Vous pouvez essayer d'utiliser un div avec un positionnement absolu:

.example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 60px;
}

Vous pouvez également créer une classe css pour ce composant

Vous devez également modifier la hauteur de la barre de progression:

.mat-progress-bar {
  height: 30px;
}

<section class="example-section">
      <mat-progress-bar
          [color]="primary"
          [mode]="mode"
          [value]="value">
      </mat-progress-bar>
            <div style="position: absolute; padding: 10px; color: white;"> {{value}}% </div>
    </section>

Démo ici

0 commentaires

0
votes

Pour insérer la barre de progression centrale, utilisez les attributs suivants width: 100%; text-align: center; à l'intérieur du div

<div style="position: absolute; padding: 10px; color: white; width: 100%; text-align: center;">

0 commentaires