離子列表中的多色離子化身邊框

我有一個離子列表，每個項目都顯示帶有彩色邊框的圓形離子化身圖像。我知道如何做到這一點，並使其成爲固定的顏色。但我希望列表中的每個項目具有不同的顏色，具體取決於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

來源

2017-05-26 user3561494

我嘗試在HTML中設置顏色像這樣，但它沒有工作： – user3561494

您可以使用[style.border]屬性綁定來執行此操作。請看看this 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擺脫我們的模型正確的顏色。

來源

2017-05-27 06:50:35 sebaferreras

離子列表中的多色離子化身邊框

回答

相關問題