我想在选项文本下添加描述该选项的行。
默认情况下,mat-select 限制字符数并在行末尾添加“...”。我想要有需要的多行选项。斯塔克闪电战演示:https://stackblitz.com/edit/angular-wj9svw https://stackblitz.com/edit/angular-wj9svw我的代码:
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak longDescription longDescription longDescription longDescription longDescription'},
{value: 'pizza-1', viewValue: 'Pizza longDescription longDescription longDescription longDescription longDescription longDescription v v longDescription'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
}
html:
<mat-form-field>
<mat-select placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
<b> some additional text text text text texttext </b>
</mat-option>
</mat-select>
</mat-form-field>
使用以下CSS:
.mat-select-panel mat-option.mat-option {
height: unset;
}
.mat-option-text.mat-option-text {
white-space: normal;
}
OR
/deep/ .mat-select-panel mat-option.mat-option {
height: unset;
}
/deep/ .mat-option-text.mat-option-text {
white-space: normal;
}
示例演示在这里 -https://stackblitz.com/edit/angular-material2-issue-ndtstg https://stackblitz.com/edit/angular-material2-issue-ndtstg
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)