web-dev-qa-db-fra.com

md-list-icon ou md-button alignés à droite? (Matériau angulaire 2)

Peu importe comment faire des boutons/icônes/cases à cocher alignés à droite comme dans le Matériel 1:

 Angular Material 1 list with actions https://material.angularjs.org/latest/demo/list

J'ai actuellement (Matériel 2):

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

 Angular Material 2 list with actions

angularangular-material2
10
srokatonie

Pour ce qui est décrit ci-dessus, la solution est assez simple, omettez simplement mat-list-icon dans votre sélecteur et Material fera tout ce qu'il faut pour: 

<mat-list>
  <mat-list-item *ngFor="let position of cart">
    <h3 mat-line> {{ position.name }} </h3>
    <p mat-line>
      <span> Line 1 </span>
    </p>
    <div> $2.00 </div>
    <button mat-icon-button (click)="remove(1)">
      <mat-icon class="mat-24">delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

 enter image description here

17
srokatonie

En fait, mat-list utilise flex box. Vous pouvez commander individuellement l'article à l'aide de la propriété CSS 'order'. Il suffit d'utiliser un nombre suffisant pour la commande

md-icon[md-list-icon]{
  order: 10;
}
<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

0
Prateek Arora