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í:
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:
|
1 |
ionic g page list-standard |
|
1 |
ionic g page list-sliding |
|
1 |
ionic g page list-reorder |
|
1 |
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
- ion-item-sliding
- ion-item-options
- ion-item-option
- ion-reorder-group
- ion-reorder
- ion-item-group
- ion-item-divider
ion-list estandar
Para hacer una lista estandar, solo necesitamos colocar ion-item por cada elemento que queramos mostrar.
Parte TS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Resultado:
Por último, os dejo un video donde os lo explico con detalle.
Aquí tienes el repositorio de github.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta