Saltar al contenido

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

Ionic List

¿[email protected] en implementar una lista de Ionic, o ion-list, en tu aplicación? 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?

Si la respuesta es sí, déjame decirte que no eres el único, ni serás el último, que pasa por este artículo a revisar dicha información. Es más, yo mismo cuando quiero hacer algo que escapa de la normal, tengo que venir aquí y echarle un repaso para aclarar las ideas.

Si aún no me conoces, mi nombre es Aitor Sánchez y soy desarrollador de apps desde el 2014 y en este video te enseñaré cómo, de manera clara y con ejemplos, puedes utilizar una ion-list en tu aplicación

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Cómo se usan las Listas / List en Ionic

Pero antes de continuar, 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.

 

Más contenidos del curso:

 

Y para los más ganduletes, el tutorial en vídeo aquí:

 

 

Pues eso ha sido todo de momento. Cómo te habrás dado cuenta en otros artículos esto va creciendo paulatinamente con peticiones de los usuarios. Así que puede que la próxima vez que acabes aquí el artículo tenga algo diferente 🙂

Solo decirte que si te ha gustado te suscribas al círculo aquí, en el enlace tienes toda la información. Y si no sabes lo que es aún, básicamente, se trata de una comunidad que estoy montando alrededor de esta genial disciplina que es la programación.

Pues sin más me despido ya, y nos vemos en el siguiente artículo. Hasta entonces, que vaya bien 🙂