ionic UI 中 ion-list 去除下划线。

AndrewWen099

于 2020-11-14 17:29:52 发布

阅读量541

点赞数 2

分类专栏： Ionic+AngularJs 文章标签： html5 html

本文链接：https://blog.csdn.net/u012381782/article/details/109693781

版权

Ionic+AngularJs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Ionic应用中使用ion-list和ion-item组件，并通过设置lines属性或自定义样式来控制item之间的底部边框显示。通过设置lines为none可以消除默认边框，或者通过CSS定制边框的粗细，实现列表项的个性化布局。

摘要由CSDN通过智能技术生成

ion-list控件中有嵌套ion-item，这个item可以设置是否显示底部边框分割线可以设置lines=none属性不展示，默认是展示的。或者可以使用自定义样式控制这个底部边框的粗细。

<section>
      <ion-list>
        <ion-item *ngFor="let item of surroundingBusiness.data;let i=index;" detail="false" [lines]="none"
          (click)="closeModel(item);">
          <p *ngIf="i==0" class="item-p"></p>
          <p *ngIf="i!=0" class="sec-item-p"></p>
          <ion-label>
            <h3 *ngIf="i==0" class="item-h3">{{item.title}}</h3>
            <h3 *ngIf="i!=0" class="sec-item-h3">{{item.title}}</h3>
            <p><span class="price label-p-span">{{item.address}}</span></p>
          </ion-label>
        </ion-item>
      </ion-list>
    </section>