Quitar el borde inferior de ion-item

Por defecto, en una Ionic añade un borde inferior a cada , tal que:

Podemos quitarlas de toda la lista con el atributo lines=»none».

Poniéndolo el elemento quitaremos todos los bordes.

<ion-list lines="none">
    <ion-item>
        <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Super Mario World</ion-label>
    </ion-item>
</ion-list>

Ejemplo:

Si queremos quitar de cierto elemento:

<ion-list>
    <ion-item>
        <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item lines="none">
        <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
        <ion-label>Super Mario World</ion-label>
    </ion-item>
</ion-list>

Ejemplo:

Si queremos hacerlo con CSS, tendremos que sobreescribir la propiedad custom de la propiedad ion-item: –border-style

ion-item{
    --border-style: none;
}

Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*