Las listas son los elementos más populares de cualquier aplicación web o móvil. Están formados por varias filas de elementos que incluyen texto, botones, conmutadores, iconos, miniaturas y muchos más. Podemos usarlo para mostrar información diversa como menús, pestañas o para romper la monotonía de los archivos de texto puro.
Las listas de Ionic suelen contener elementos con contenido de datos similar, como imágenes y texto. Admite varias interacciones, incluido deslizar elementos, arrastrar para reordenar elementos dentro de la lista y eliminar elementos. Podemos acceder a las listas utilizando un estándar
Crear listas
Podemos crear listas usando la siguiente sintaxis.
El marco Ionic proporciona diferentes tipos de listas, que son las siguientes.
- Encabezados de lista
- Lista insertada
- Lista de iconos
- Divisores de lista
- Lista de avatares
- Lista de miniaturas
- Lista deslizante
- Lista de varias líneas
Encabezado de lista
Cada lista puede incluir un encabezado en la parte superior de la lista. Podemos incluir un encabezado de lista usando el elemento
Lista insertada
Las listas Ionic no contienen un margen exterior por defecto. Cuando necesite una lista para llenar su propio contenedor, puede agregar el atributo de inserción al componente
Ejemplo
En el siguiente ejemplo, podemos entender cómo
Producción
Icono de lista
Agregar iconos a la lista proporciona una insinuación sobre el contenido de cada elemento. También podemos establecer el tamaño del icono, ya sea pequeña o grande. De forma predeterminada, el tamaño del icono es pequeño, pero se puede agrandar con el atributo grande. Finalmente, está el
Ejemplo
Producción
Divisor de artículos
El divisor de lista se utiliza para organizar los elementos en grupos lógicos. Ionic nos da el
Ejemplo
Producción
Avatares de artículos y miniaturas
Tanto los avatares como las miniaturas se utilizan para agregando imágenes. La principal diferencia es que las imágenes de los avatares son más grandes que un icono pero más pequeñas que las miniaturas.
Avatar suele ser un circular componente que envuelve una imagen o icono. Puede usarse para representar a una persona o un objeto. Podemos agregar un avatar usando un
Miniatura generalmente una cuadrado componente que envuelve una imagen o icono. Se puede utilizar para mostrar un grupo de imágenes más grandes o proporcionar una vista previa de la imagen a tamaño completo. Podemos agregar una miniatura usando un componente
Ejemplo
Producción
Lista deslizante
Un elemento deslizante contiene un elemento que se puede deslizado hacia la izquierda o hacia la derecha para revelar un oculto conjunto de botones. Podemos usar un elemento deslizante agregando el
Dirección de deslizamiento: Por defecto, los botones están en el lado derecho (final). Significa que las opciones se revelan cuando el elemento deslizante se desliza de derecha a izquierda (de un extremo a otro). Si necesita deslizar la opción de izquierda a derecha (de principio a fin), configure el lado atributo para «iniciar» en el elemento
Ejemplo
Veamos cómo funciona el deslizamiento de elementos con listas iónicas en el siguiente ejemplo. Este ejemplo contiene dos elementos que son Elemento deslizante 1 y Elemento deslizante 2. El primer elemento se desliza de De derecha a izquierda y la diapositiva del segundo elemento de de izquierda a derecha.
Producción
Cuando ejecute la aplicación Ionic anterior, dará el siguiente resultado.
A continuación, deslice el elemento deslizante 1 de derecha a izquierda. La siguiente salida aparece en su navegador.
