移除离子项目分隔线

Question

我如何删除<ion-item>分隔符？我有以下代码连续显示4个项目:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
              <ion-item color="dark">
                  <ion-avatar item-left>
                      <img [src]="photo" class="img img-circle"/>
                  </ion-avatar>
                  {{user.name}}
              </ion-item>
              </ion-col>
            </ion-row>

并且输出显示连续4个图像,例如,但每个图像下面都有一个白色分隔符.我不想要任何分隔符.

我试着设置,style="border:none"但它没有这样做.

Answer 1

使用 no-lines

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item no-lines color="dark"><!-- here -->
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
     </ion-col>
</ion-row>

Answer 2

无论出于什么原因，这都不适合我。但是让lines =“ none”效果很好。

对于离子v4

<ion-item lines="none"> </ion-item>

从离子文档中拉出... https://ionicframework.com/docs/api/list

Answer 3

将此应用于 Ionic V4。真的会起作用..快乐编码

<ion-item lines="none">
</ion-item>

Answer 4

对于ionic v4，您应该使用lines属性：

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item lines="none" color="dark">
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
    </ion-col>
</ion-row>

Answer 5

如果您想在所有<ion-item>'s上全局禁用线条/边框，只需将以下代码添加到您的src/global.scss应用程序（使用 Angular 生成 Ionic v4 应用程序时的默认设置）中。

ion-item {

    --border-width: 0;
    --inner-border-width: 0;
}

lines="none"a<ion-item>上的属性不做其他任何事情。

希望它可以帮助某人。

干杯 Unkn0wn0x