List Ionic | Aprende a usarla cómo un máquina la etiqueta ion-list

¿Buscas mostrar una lista en tu app Ionic con un ion-list? O, quizás, ya sabes cómo se hace pero estás buscando cómo trabaja alguna función o el contenido de algún campo de clase del componente List Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el 2014, y en este artículo vas a aprender, de manera clara y con ejemplos, a mostrar una ion-list en tu aplicación como si fueses un programador de OpenIA.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Cómo se usan las Listas / List en Ionic

Veamos un ejemplo de cómo podemos usar el sistema de la mánera más sencilla posible.

<!—- Listas de ítems con texto. -->
<ion-list>
  <ion-item>
    <ion-label>Pokémon Amarillo</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>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>


<!-- Lista de ítem con inputs -->
<ion-list>
  <ion-item>
    <ion-label>Input</ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Toggle</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>
  <ion-item>
    <ion-label>Radio</ion-label>
    <ion-radio slot="end"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Checkbox</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-list>


<!-- Lista de objetos deslizantes -->
<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Cómo puedes apreciar, al meter “ion-items” dentro del “ion-list” puedes meter cualquier composición dentro de estos. Sería cómo los “ul” y los “li” siendo el “ul” el “ion-list” y los “li” el “ion-item”.

Vamos a continuar hablando de las propiedades con las que cuenta este módulo.

Propiedades de Ionic List

La verdad que esta sección va a ser cortita. Las propiedades en sí, la mayoría, las hereda de los padres. Solo tiene 3 y son las siguientes:

Inset

• Descripción -> Si es verdad, la lista tendrá un margen alrededor y esquinas redondeadas.
• Atributo -> inset
• Tipo -> Boleano
• Por defecto -> False

Lines

• Descripción -> Nos permite definir cómo se debe de mostrar el borde inferior de los elementos.
• Atributo -> lines
• Tipo -> Enumerado
  • “full”
  • “inset”
  • “none”
  • Undefined

Mode

• Descripción -> Nos permite definir el estilo en el que se mostrará la lista en pantalla.
• Atributo -> lines
• Tipo -> enumerado
  • “ios”
  • “md”

Pues hasta aquí llegan las propiedades. Qué, cómo he comentado antes, no eran muchas. Todas las demás que pueda tener son heredadas.

Y visto esto, vamos con las funciones y métodos, a ver que nos encontramos :)

Métodos y funciones de ion list

Pues la verdad que esta parte es, incluso si cabe, más escueta que la de las propiedades. La verdad que es un componente demasiado simple.

closeSlidingItems

Esta función lo que nos permite es cerrar todas los sliders abiertos que haya en cualquiera de los objetos que compongan la lista.

No recibe ningún parámetro y devuelve una promesa que tendremos que controlar. En ella llegará una booleano que nos avisará si se ha realizado todo correctamente.

Tutorial en video, por si no te gusta leer

 

Algo más que quizás te interese

La mejora constante del logo de tu app es una estrategia que te permite aumentar tus ingresos, porque al mejorar el logo aumentan las instalaciones. Hasta ahí bien. Pues para que hagas esto más rápido y fácil, hemos creado esta aplicación. Aplicación que te permite evaluar, optimizar y mejorar tu logo con IA. No te quiero espoilear, entra en el enlace.

Pues sin más me despido ya y espero haberte ayudado a resolver tu dudas. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien :)