移除离子项目分隔符

Posted 2023-03-16

【中文标题】移除离子项目分隔符

【英文标题】：Remove ion item divider

【发布时间】：2017-05-13 13:39:18

【问题描述】：

如何删除<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"，但没有成功。

【问题讨论】：

显示图像/屏幕截图..很难理解...可能是ion-col, ion-row有一些显示边框的css。

通常在网格系统中会有填充物在块之间创建“空气”。我认为您的 ion-col 元素上的 style="padding: 0" 应该可以解决问题。但我认为也许你应该重新考虑在这里使用 ion-row 和 ion-cols ，因为它对于你的需求来说似乎有点太复杂了。

【参考方案1】：

这适用于 ionic 2 和 3。有关更高版本的 ionic，请参阅 this answer

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

【讨论】：

感谢@jegadeesh，添加<IonItem lines="none"> 解决了我在Ionic5 中的问题！！干杯！

【参考方案2】：

无论出于何种原因，这对我不起作用。 但是拥有lines="none" 效果很好。

适用于 ionic v4

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

取自 ionic 文档。 https://ionicframework.com/docs/api/list

【讨论】：

这是 ionic v4 以后的版本。

感谢 Ionic 再次改变一切。

这适用于角度 8，标记的解决方案不

感谢您的回答，效果很好。这是一个简单的命令，让我不需要花费数小时寻找一种方法来强行删除这条烦人的小线。非常感谢哈哈

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

ion-item 

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

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

希望对某人有所帮助。

干杯 未知0wn0x

【讨论】：

谢谢。我正在寻找一个全球性的解决方案。

【参考方案6】：

我尝试使用 no-line 但它在 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>

【参考方案7】：

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

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>

【参考方案8】：

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