web-dev-qa-db-fra.com

Angular Material 2 Header Card Card Buttons set Right

J'utilise le Angular Material 2 et je veux dans un bouton d'icône d'en-tête de carte. Comment puis-je placer les boutons sur le côté droit?

Mon plan: enter image description here

Site Web actuel: enter image description here

Je veux mettre les boutons en ligne droite dans l'en-tête. Comment puis-je le faire? J'exclus le code de catégorie car il n'y a pas de problème. Dans le code TypeScript, il n'y a qu'une boucle for pour ajouter plus de cartes et une méthode factice pour cliquer sur une carte.

.healthy-search {
    width: 100%
}

.healthy-card {
    margin-right: 5px;
    margin-bottom: 5px;
}
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="90%" fxFlex.xs="90%">
    <mat-form-field class="healthy-search">
      <textarea matInput placeholder="Suche"></textarea>
    </mat-form-field>
  </div>
</div>
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="85%" fxFlex.xs="85%">
    <mat-expansion-panel>
    
     <!-- Here is the Category -->
     

     <!--Elements of Category -->

      <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
        <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Title {{number}}</mat-card-title>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Edit</mat-icon>
              </button>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Delete</mat-icon>
              </button>
            </mat-card-header>
            <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
            <mat-card-content>
              <p>
                The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
                very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
              </p>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </mat-expansion-panel>
  </div>
</div>

Lyror

angularangular-material2angular-flex-layout
8
Lyror

Ce message est assez ancien, mais peut-être que quelqu'un d'autre y est également tombé. (Au moment d'écrire cette réponse, la version actuelle est Angular Material 6)

Je recommande d'utiliser l'attribut <mat-card-title-group>. À partir des documents ( https://material.angular.io/components/card/overview ):

<mat-card-title-group> peut être utilisé pour combiner un titre, un sous-titre et une image dans une seule section.

De cette façon, le titre et la description seront regroupés en une seule div et le conteneur fxFlex fonctionne réellement. Cela permet également d'ajouter des boutons/icônes à gauche.

Un exemple pourrait ressembler à ceci:

<mat-card-header>
    <mat-icon>help</mat-icon>
    <mat-card-title-group>
        <mat-card-title>
            Title
        </mat-card-title>
        <mat-card-subtitle>
            Subtitle
        </mat-card-subtitle>
    </mat-card-title-group>
    <div fxFlex></div>
    <button mat-button>Click me!</button>
</mat-card-header>
11
Nicolas Gehlert

Retirez d'abord le fxLayoutAlign = "droite" des boutons. fxLayoutAlign est pour les conteneurs.

Vous devez au niveau d'un div ou d'un autre espace réservé avec fxFlex entre le titre et les boutons. Cela poussera les boutons jusqu'à la fin.

<md-card-header fxLayout="row">
  <md-card-title >Title </md-card-title>
  <div fxFlex></div>
  <button md-button>Something</button>
</md-card-header>
4
Michael Warneke

Dans angular matériau 7, cela me semble bien:

<mat-card>
 <mat-card-header>
  <mat-card-title-group>
    <mat-card-title>
      Title
    </mat-card-title>
    <mat-card-subtitle>
      Subtitle
    </mat-card-subtitle>
  </mat-card-title-group>
  <div fxFlex></div>
  <div fxLayoutAlign="center center">
    <button mat-stroked-button>Click me!</button>
  </div>
 </mat-card-header> 
</mat-card>
0
Wender Patrick