[英]multi colored ion-avatar borders in an ion-list
我有一个离子列表,每个项目都显示一个带有彩色边框的圆形离子头像。 我知道如何做到这一切,并使其成为一种固定的颜色。 但我想让列表中的每个项目具有不同的颜色,具体取决于listItem.color的值。
这是有一个固定颜色的工作代码:
CSS:
.item-md ion-avatar img {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
overflow: hidden !important;
border: 2px solid #fce515 !important;
}
HTML:
<ion-list class="wrapping-list">
<ion-item no-lines *ngFor="let listItem of list; let i = index" (click)="seeListItem(i)" (long-press)="longPressListItem(i)" (swipe-left)="swipeLeftItem(i)">
<ion-avatar item-left>
<img width="73px" height="43px" src="{{listItem.thumbnail}}" />
</ion-avatar>
<h2 class="title-text" >{{ listItem.name }} </h2>
</ion-item>
</ion-list>
我需要一些方法将边框颜色设置为listItem.color中的颜色
您可以使用[style.border]
属性绑定来执行此操作。 请看看这个plunker 。
@Component({...})
export class HomePage {
public items: Array<{ name: string, imageUrl: string, color: string }>;
constructor() {
this.items = [
{ name: 'Woody', imageUrl: '...', color: '#dff0d8' },
{ name: 'Buzz Lightyear', imageUrl: '...', color: '#d9edf7' },
{ name: 'Jessie', imageUrl: '...', color: '#fcf8e3' }
];
}
}
然后在你看来:
<ion-list>
<ion-item *ngFor="let item of items">
<ion-avatar item-left>
<img [style.border]="'5px solid' + item.color" [src]="item.imageUrl">
</ion-avatar>
<h2>{{ item.name }}</h2>
<p>Lorem ipsum lorem ipsum...</p>
</ion-item>
</ion-list>
请注意,在[style.border]="'5px solid' + item.color"
,第一部分只是一个字符串'5px solid'
,然后我们使用item.color
从我们的模型中获得正确的颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.