本文介绍了如何突出显示离子列表中的选定项目/项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个项目列表显示在屏幕上,只是想在列表视图中突出显示选定的项目/项目,请帮助
I have a list of items populating on a screen and just wanted to highlight the selected item/items in the list view , please help
<ion-list >
<button ion-item *ngFor="let route of Routes" (click)="selectCP(route)" >
{{route.Name}}
</button>
</ion-list>
推荐答案
使用Angular条件样式函数.
Using Angular conditional style function.
[class.stylename]="一些将返回真或假的条件语句"
[class.stylename]="Some conditional statement that will return true or false"
例子:
<!-- This will probably go into your SCSS stylesheet -->
<style>
.highlight {
background-color: #FFFF33 !important;
}
</style>
<!-- In your HTML code -->
<ion-list >
<button ion-item [class.highlight]="route == 1" *ngFor="let route of Routes" (click)="selectCP(route)" >
{{route.Name}}
</button>
</ion-list>
这篇关于如何突出显示离子列表中的选定项目/项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!