In my Ionic2 project, I have an <ion-list> consisting of various items. Currently, these items are plain, but I desire to add some styling such that each item in the list displays a subtle shadow effect, similar to the one shown in the first image of this example (although instead of grey shading, I want to use a different color):
Link to Example Image
This is the code snippet I currently have:
<ion-list>
<ion-item-sliding *ngFor="let item of personModels" (click)="itemTapped($event, item, true)">
<ion-item class="item-search">
<ion-avatar item-left><img [src]="item.avatar64 ? item.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar>
<ion-row >
<ion-col><h2>{{item.person.firstName}} {{item.person.lastName}}</h2></ion-col>
</ion-row>
<ion-row >
<ion-col>more details</ion-col>
</ion-row>
</ion-item>
</ion-list>
UPDATE:
I made the following additions to my code:
<ion-list>
<ion-item-sliding *ngFor="let item of personModels" (click)="itemTapped($event, item, true)">
<ion-item class="item-search">
...
</ion-item-sliding>
</ion-list>
.item-search {
border-radius: 50%;
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: -4px;
background: black;
border: 3px solid black;
margin: -5px auto 0;
z-index: 2;
padding-left: 1px;
}
Here is the result after making these changes: