Remove ion item divider

问题

How I can remove <ion-item> divider? I have the following code to show 4 items in a row:

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

and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.

I tried to set style="border:none" but it didn't do it.

回答1:

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

回答2:

For whatever reason this didn't work for me. But having lines="none" worked great.

For ionic v4

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

Pulled from ionic docs... https://ionicframework.com/docs/api/list

回答3:

For ionic v4, you should use the lines property:

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

I tried with no-line but it didn't work in ionic 4

Only this work for me in 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>

回答5:

Apply this for Ionic V4. Really it will work.. Happy coding

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

回答6:

If you want to disable the lines / borders globally on all of your <ion-item>'s, just add the following code to your src/global.scss (default when generating a Ionic v4 App with Angular) of your application.

ion-item {

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

The attribute lines="none" on a <ion-item> does nothing other.

Hope it helps someone.

Cheers Unkn0wn0x

来源：https://stackoverflow.com/questions/41376147/remove-ion-item-divider

标签

ionic-framework

ionic2

divider