移除离子项目分隔线

时间:2016-12-29 08:52:40

标签: ionic2 divider ion

如何删除<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",但它没有这样做。

8 个答案:

答案 0 :(得分:60)

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

答案 1 :(得分:15)

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

对于离子v4

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

从离子文档中提取... https://ionicframework.com/docs/api/list

答案 2 :(得分:5)

如果您要全局禁用所有<ion-item>上的线条/边框,只需将以下代码添加到您的src/global.scss(使用Angular生成Ionic v4应用时为默认)应用。

ion-item {

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

lines="none"上的属性<ion-item>没有其他作用。

希望它对某人有帮助。

欢呼 Unkn0wn0x

答案 3 :(得分:3)

我尝试了不带线,但是在离子4中不起作用

只有在离子4中对我有用:

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

<ion-list>
 <ion-item lines="none" button detail *ngFor="let note of notesService.notes">
      <ion-label>{{ note.title }}</ion-label>
    </ion-item>
</ion-list>

答案 4 :(得分:2)

对于离子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>

答案 5 :(得分:0)

将其应用于Ionic V4。确实可以。.编码愉快

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

答案 6 :(得分:0)

我正在使用离子4,并且line =“ none” somethimes不起作用。 所以我用这行。

ion-list:not(.list-lines-none) ion-item::before{
    border-width: 0 !important;
}

这是我的ionItem示例。 (它也具有隐藏的错误属性)

<IonItem lines="none" detail={false}>
    <IonIcon
        className="w-40 h-40 float-left"
        src="/assets/icon/store-black.svg"
    />
    <IonLabel className="flex flex-col ml-10">
        <h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
        <span className="text-sm leading-tight">Kratki opis</span>
    </IonLabel>
    <IonIcon
        className=" absolute top-50 right-30 w-15 h-15"
        src="/assets/icon/arrow-right.svg"
    />
</IonItem>

答案 7 :(得分:0)

在您的离子项目中使用 (lines="none")