如何在 mat-list-option 元素内的 mat-selection-list 中添加辅助操作(mat-icon-button)。
目前,所有项目都添加到 mat-list-text div 内。
例子 (https://stackblitz.com/edit/angular-dwac7y):
<mat-selection-list [(ngModel)]="selectedOptions">
<mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true">
<mat-icon matListAvatar>person</mat-icon>
<h3 matLine> {{item.name}}</h3>
<p matLine>
{{item.details}}
</p>
<button mat-icon-button (click)="onEdit($event, item)">
<mat-icon>edit</mat-icon>
</button>
</mat-list-option>
</mat-selection-list>
你可以这样做。
<h2>Selection-List with secondary action:</h2>
<mat-selection-list [(ngModel)]="selectedOptions">
<mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true">
<div style="display:flex; justify-content:space-between;align-items:center">
<div style="display:flex;align-items:center">
<mat-icon matListAvatar>person</mat-icon>
<div style="display:flex; flex-direction:column">
<div>
<h3 matLine> {{item.name}}</h3>
</div>
<div style="margin-top:-30px">
<p matLine>
{{item.details}}
</p>
</div>
</div>
</div>
<div>
<button mat-icon-button (click)="onEdit($event, item)">
<mat-icon>edit</mat-icon>
</button>
</div>
</div>
</mat-list-option>
</mat-selection-list>
但下面的风格...
<div style="margin-top:-30px">
在我看来这不是一个好的解决方案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)