如何在 mat-list-option (mat-selection-list) 项中添加辅助操作 [英] how to add a secondary action in mat-list-option (mat-selection-list) item
本文介绍了如何在 mat-list-option (mat-selection-list) 项中添加辅助操作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在 mat-list-option 元素内的 mat-selection-list 中添加辅助操作(mat-icon-button).
目前所有项目都添加到 mat-list-text div 中.
示例(
How is it possible, to add an secondary action (mat-icon-button) in an mat-selection-list inside the mat-list-option element.
Currently all items are added inside the mat-list-text div.
example (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>
解决方案
you could do it as following.
<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>
but the following style...
<div style="margin-top:-30px">
is not a good solution imo.
这篇关于如何在 mat-list-option (mat-selection-list) 项中添加辅助操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文