How to remove bottom line from the ionic 2 components
Seems like there isn't a way to remove that by using Ionic Sass properties. That being said, we can remove it by just using some css style rules:
.item-md.item-block .item-inner,
.item-md.item-input.input-has-focus .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner,
.list-md .item-input.input-has-focus:last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
border-bottom: none;
box-shadow: none;
}
.list-md .item-input.input-has-focus:last-child .item-inner,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child .item-inner {
box-shadow: none;
}
just include your <ion-item></ion-item>
elements within a <ion-list inset></ion-list>
. Make sure you include inset
property to your ion-list.
Just include no-lines
in ion-item
. Just like below
<ion-item no-lines></ion-item>
You can now just add lines="none".
Example:
<ion-item class="ion-card" lines="none">
From: https://ionicframework.com/docs/api/item