Ionic ion-list: Aprende como exprimir el componente ion-list

25/09/20230 comentarios

Hola a todos, hoy os voy a enseñar como podemos utilizar el componente ion-list de ionic.

ion-list es uno de los componentes mas utilizados en IONIC para mostrar datos de una forma sencilla, pero ¿sabes todo lo que podemos hacer con este componente?

Creación proyecto IONIC

En primer lugar, es crear un proyecto IONIC, sino sabes como se hace, te dejo un tutorial aquí:

IONIC 7 – Guía sobre como crear tu primera aplicación

Creación de páginas para ejemplos ion-list

Vamos a crear una pagina para cada ejemplo.

Posiciónate dentro de la carpeta app, abre una terminal y escribe los siguientes comandos:

$ ionic g page list-standard

$ ionic g page list-sliding

$ ionic g page list-reorder

$ ionic g page list-group

Documentación sobre ion-list

Te paso la documentación de los componentes que vamos a ver en estos ejemplos:

ion-list estandar

Para hacer una lista estandar, solo necesitamos colocar ion-item por cada elemento que queramos mostrar.

Parte TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-standard',
  templateUrl: './list-standard.page.html',
  styleUrls: ['./list-standard.page.scss'],
})
export class ListStandardPage implements OnInit {

  public pokemons: string[];

  constructor() {
    this.pokemons = [];
  }

  ngOnInit() {
    this.pokemons = [
      'Bulbasaur',
      'Ivysaur',
      'Venusaur',
      'Charmander',
      'Charmeleon',
      'Charizard',
      'Squirtle',
      'Wartortle',
      'Blastoise'
    ]
  }

}

Parte HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>list-standard</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-list>
    <ion-list-header>Pokemons</ion-list-header>
    <ion-item *ngFor="let element of elements">
      <ion-label>{{element}}</ion-label>
    </ion-item>
  </ion-list>

  <ion-button href="/list-sliding" routerDirection="root">Sliding</ion-button>
  <ion-button href="/list-reorder" routerDirection="root">Reorder</ion-button>
  <ion-button href="/list-group" routerDirection="root">Group</ion-button>

</ion-content>

Resultado:

Opciones en un ion-list

Si queremos mostrar opciones en una lista, usaremos los componentes ion-item-sliding, ion-item-options e ion-item-option.

Parte TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-sliding',
  templateUrl: './list-sliding.page.html',
  styleUrls: ['./list-sliding.page.scss'],
})
export class ListSlidingPage implements OnInit {

  public pokemons: string[];

  constructor() {
    this.pokemons = [];
  }

  ngOnInit() {
    this.pokemons = [
      'Bulbasaur',
      'Ivysaur',
      'Venusaur',
      'Charmander',
      'Charmeleon',
      'Charizard',
      'Squirtle',
      'Wartortle',
      'Blastoise'
    ]
  }

}

Parte HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>list-sliding</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-list>
    <ion-list-header>Pokemons</ion-list-header>
    <ion-item-sliding *ngFor="let element of elements">
      <ion-item>
        <ion-label>{{element}}</ion-label>
      </ion-item>

      <ion-item-options side="end">
        <ion-item-option color="warning">
          <ion-icon name="pencil-outline"></ion-icon>
          <ion-icon slot="icon-only" name="pencil-outline"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger">
          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
        </ion-item-option>
      </ion-item-options>
      
      <ion-item-options side="start">
        <ion-item-option side="start" color="danger">
          <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
        </ion-item-option>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

  <ion-button href="/list-standard" routerDirection="root">Standard</ion-button>
  <ion-button href="/list-reorder" routerDirection="root">Reorder</ion-button>
  <ion-button href="/list-group" routerDirection="root">Group</ion-button>

</ion-content>

Resultado:

Ordenar elementos

Con los componentes ion-reorder-group y ion-reorder nos permite ordenar los elementos de una lista.

IMPORTANTE: se debe colocar el atributo disabled a false ya que por defecto esta a true.

Para reordenar los elementos, debemos usar el evento ionItemReorder, en este método debemos llamar a la función complete dentro de la propiedad detail.

Parte TS

import { Component, OnInit } from '@angular/core';
import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
  selector: 'app-list-reorder',
  templateUrl: './list-reorder.page.html',
  styleUrls: ['./list-reorder.page.scss'],
})
export class ListReorderPage implements OnInit {

  public pokemons: string[];

  constructor() {
    this.pokemons = [];
  }

  ngOnInit() {
    this.pokemons = [
      'Bulbasaur',
      'Ivysaur',
      'Venusaur',
      'Charmander',
      'Charmeleon',
      'Charizard',
      'Squirtle',
      'Wartortle',
      'Blastoise'
    ]
  }

  handleOrder($event: CustomEvent){
    console.log($event);
    
    const pokemon = this.pokemons[$event.detail.from];
    this.pokemons.splice($event.detail.from, 1);
    this.pokemons.splice($event.detail.to, 0, pokemon);

    console.log( this.pokemons);
    
    $event.detail.complete();
  }

}

Parte HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>list-reorder</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  
  <ion-list>
    <ion-list-header>Pokemons</ion-list-header>
    <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
      <ion-item *ngFor="let element of elements">
        <ion-label>{{element}}</ion-label>
        <ion-reorder slot="end"></ion-reorder></ion-item>
    </ion-reorder-group>
  </ion-list>

  <ion-button href="/list-standard" routerDirection="root">Standard</ion-button>
  <ion-button href="/list-sliding" routerDirection="root">Sliding</ion-button>
  <ion-button href="/list-group" routerDirection="root">Group</ion-button>

</ion-content>

Resultado:

Agrupar elementos

La agrupación de elementos se hace con los componentes ion-item-group y ion-item-divider.

En esta caso, utilizaremos otra estructura en los datos.

Parte TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-group',
  templateUrl: './list-group.page.html',
  styleUrls: ['./list-group.page.scss'],
})
export class ListGroupPage implements OnInit {

  public types: any;

  constructor() {
    this.types = [];
  }

  ngOnInit() {
    this.types = [
      {
        group: 'PLANTA',
        items: [
          'Bulbasaur',
          'Ivysaur',
          'Venusaur'
        ]
      },
      {
        group: 'FUEGO',
        items: [
          'Charmander',
          'Charmeleon',
          'Charizard',
        ]
      },
      {
        group: 'AGUA',
        items: [
          'Squirtle',
          'Wartortle',
          'Blastoise'
        ]
      }
    ]
  }

}

Parte HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>list-group</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-list>
    <ion-list-header>Pokemons</ion-list-header>
    <ion-item-group *ngFor="let element of elements">
      <ion-item-divider>
        <ion-label>{{element.group}}</ion-label>
      </ion-item-divider>

      <ion-item *ngFor="let item of element.items">
        <ion-label>{{item}}</ion-label>
      </ion-item>

    </ion-item-group>
  </ion-list>

  <ion-button href="/list-standard" routerDirection="root">Standard</ion-button>
  <ion-button href="/list-sliding" routerDirection="root">Sliding</ion-button>
  <ion-button href="/list-reorder" routerDirection="root">Reorder</ion-button>

</ion-content>

Resultado: