离子列表中的多色离子 - 化身边界

Question

I have an ion-list and each item shows a round ion-avatar image with a colored border. I know how to do all this and make it one fixed color. But I would like to have each item on the list to have a different color depending on what the value of listItem.color is.

This is working code to have one fixed 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>

I need some way to set the border color to what is in listItem.color

Answer 1

You can use the [style.border] attribute binding to do so. Please take a look at 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' }
      ];
    }
}

And then in your view:

 <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>

Please notice that in [style.border]="'5px solid' + item.color" the first part is just a string '5px solid' and then we use the item.color to get the right color from our model.