0
我正在使用Ionic2并且有<ion-list>
的items
。目前他们只是香草,但我想应用样式,以便列表中的每个项目都具有渐变阴影效果,如本例中的第一张图片所示(但是,我不想使用灰色阴影,而是使用颜色):项目列表的CSS阴影效果
我的代码如下:
<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>
UPADTE
我增加了以下内容:
<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;
}
,这是结果:
我认为close div标记缺失/ – Richard
谢谢。不幸的是它不适合我。我认为这与离子标签有关。尽管如此,我仍会玩弄它。这是一个好开始 – Richard
哦,也许你可以尝试相同的,但不是'.shadow'只是做'h2 :: after'具有相同的属性。这样你可能不需要额外的线路。 – TheEarlyMan