英文:
How can i expand mat-select with custom action?
问题
我需要在 mat-select 旁边的箭头处实现一个新功能，但我总是搞砸了HTML/SCSS，这个新图标被chips项覆盖了。我附上了一张图片，展示了应该是什么样子的。
我的 mat-select
<mat-select
multiple
[compareWith]="compareWith"
[(ngModel)]="value"
[disabled]="isDisabled"
(ngModelChange)="onTouchedFn()">
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let item of value; index as i" removable (removed)="removeItem(item)">
{{ displayChipsValue(item) }}
<i matChipRemove [ngClass]="Icons"></i>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<mat-option *ngFor="let type of dataSource" [value]="type.value">
{{ type.text }}
</mat-option>
</mat-select>
我应该把它放在哪里，如何用SCSS使它完美？
我尝试处理HTML/SCSS，但这个新图标被其他项目遮挡了，我需要一个类似箭头的图标。
英文:
I have to implement a new function in mat-select next to the arrow, but i always messed up the html/scss and this new icon get covered by chips items. I attached a picture how this should looks like.
my mat-select
<mat-select
multiple
[compareWith]="compareWith"
[(ngModel)]="value"
[disabled]="isDisabled"
(ngModelChange)="onTouchedFn()">
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let item of value; index as i" removable (removed)="removeItem(item)">
{{ displayChipsValue(item) }}
<i matChipRemove [ngClass]="Icons"></i>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<mat-option *ngFor="let type of dataSource" [value]="type.value">
{{ type.text }}
</mat-option>
</mat-select>
Where should i put in and how could i make it perfect with scss?
I try to deal with html/scss, but this new icon get covered by other items, i need a similar icon to arrow.
答案1
得分: 0
I feel you can use a .css some like
mat-chip-grid{
padding-right:5rem;
}
.mat-mdc-form-field-icon-suffix
{
margin-left:-3.5rem;
margin-right:1rem;
}
And
<mat-form-field >
<mat-select multiple [(ngModel)]="value">
<mat-select-trigger>
<mat-chip-grid>
<mat-chip-row
*ngFor="let item of ...; index as i" removable>
...
</mat-chip-row>
</mat-chip-grid>
</mat-select-trigger>
<mat-option *ngFor="let type of ..">
...
</mat-option>
</mat-select>
<mat-icon matSuffix>close</mat-icon>
</mat-form-field>
英文:
I feel you can use a .css some like
mat-chip-grid{
padding-right:5rem;
}
.mat-mdc-form-field-icon-suffix
{
margin-left:-3.5rem;
margin-right:1rem;
}
And
<mat-form-field >
<mat-select multiple [(ngModel)]="value">
<mat-select-trigger>
<mat-chip-grid>
<mat-chip-row
*ngFor="let item of ...; index as i" removable>
...
</mat-chip-row>
</mat-chip-grid>
</mat-select-trigger>
<mat-option *ngFor="let type of ..">
...
</mat-option>
</mat-select>
<mat-icon matSuffix>close</mat-icon>
</mat-form-field>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论