移除离子项目分隔器

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

这是针对 ionic 2 和 3 的。请参阅以获得更高版本的 ionic

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

我试过无线，但它在 ionic 4 中不起作用

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

Answer 5

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

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

Answer 6

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

ion-item {

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

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

希望对大家有所帮助。

干杯未知0wn0x

Answer 7

我在 ionic 4 上，lines="none" 有时不起作用。所以我用这条线。

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

这是我的 ion Item 示例。（它也有隐藏错误属性）

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

Answer 8

在你的 ion-item 中使用 (lines="none")

移除离子项目分隔器

Remove ion item divider

ionic-framework

ionic2

divider