如何突出显示离子列表中的选定项目/项目

How to highlight selected item/items in a Ionic-list(如何突出显示离子列表中的选定项目/项目)
本文介绍了如何突出显示离子列表中的选定项目/项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个项目列表显示在屏幕上,只是想在列表视图中突出显示选定的项目/项目,请帮助

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>

这篇关于如何突出显示离子列表中的选定项目/项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
Only transition a transform in css?(是否仅在css中转换转换?)
CSS transform doesn#39;t change CSS layout(Css转换不会更改css布局)