web-dev-qa-db-fra.com

Comment aligner un en-tête de carte de texte gauche et droit dans angular 4?

J'ai besoin d'aligner le contenu du texte dans l'en-tête à gauche et à droite de la balise d'en-tête. j'ai essayé différentes idées, mais aucune ne fonctionne pour moi. Aidez moi.

 <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>
htmlangularalignmentangular-materialmat-card
4
Sivabalakrishnan

Vous pouvez également le faire si vous souhaitez continuer à utiliser le mat-title éléments:

Voir travail Exemple StackBlitz

Dans votre fichier (je l'appellerai) exemple-card.component.html 

<mat-card  >
<mat-card-header>
 <mat-card-title class="card-container-left"> Test left</mat-card-title>
 <mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>

Puis dans votre exemple-card.component.css 

.card-container-right{
  display: inline;
  float: right;
}

.card-container-left{
  display: inline;
}

..et enfin dans votre styles.css 

.mat-card-header-text{
  width: 100% !important;
}

L'astuce consiste à remplacer Angular materials .mat-card-header-text pour avoir 100% de la largeur du mat-card-header. Sinon, il se comporte comme un élément inline et ne prend que la largeur du texte de ses éléments enfants. Vous empêchant de les espacer.

7
Narm

Vous pouvez utiliser ce que la conception de matériaux utilise dans la barre d'outils de tapis

<mat-card-title>
   <span>Test left</span>
   <span class="fill-remaining-space"></span>
   <span>Test right</span>
</mat-card-title>

dans votre .css

.fill-remaining-space {
   flex: 1 1 auto;
}

Je suis désolé, cela ne fonctionne pas !!!!! Fonctionne dans Mat-Toolbar, bat pas dans Mat-card Title.

Voici comment ça marche, je savais que je l'avais utilisé quelque part

<mat-card>
  <mat-card-title-group>
    <span>Test left</span>
    <span class="fill-remaining-space"></span>
    <span>Test right</span>
  </mat-card-title-group>
</mat-card>

voir: https://stackblitz.com/edit/angular-rb5vm pour un exemple de travail

4
wFitz

ajouter un css personnalisé sur . mat-card-header classe

 .mat-card-header{
        justify-content: flex-end /* for right*/
        justify-content: flex-start /* for left*/
        justify-content: centre /* for center*/

    }
1
Codexxx