Saltar al contenido

Lista iónica – javatpoint

octubre 19, 2021
ionic list output1

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 elemento.

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 . El atributo de inserción le agrega algo de margen y ajusta el tamaño de la lista a su contenedor.

Ejemplo

En el siguiente ejemplo, podemos entender cómo y recuadro funciona con elemento.

Producción

Lista iónica

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 elemento que es un elemento de texto utilizado como subtítulos que proporcionan más información. Se utiliza en un elemento como texto de metadatos.

Ejemplo

Producción

Lista iónica

Divisor de artículos

El divisor de lista se utiliza para organizar los elementos en grupos lógicos. Ionic nos da el elementos para separar elementos en una lista. Son similares a los encabezados de listas, pero no es necesario colocarlos en la parte superior de una lista. Debe colocarse entre grupos de elementos similares.

Ejemplo

Producción

Lista iónica

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 componente dentro de un artículo. Si ponemos avatar dentro de un , entonces cambiará de tamaño para adaptarse al componente principal. Podemos posición avatar en el lado izquierdo o derecho de un elemento configurando el espacio para comenzar o terminar respectivamente.

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 dentro de un elemento. Si ponemos la miniatura dentro de un , luego cambiará de tamaño para adaptarse al componente principal. Podemos posición miniatura en el lado izquierdo o derecho de un elemento configurando el espacio para comenzar o terminar respectivamente.

Ejemplo

Producción

Lista iónica

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 componente dentro de un componente . A continuación, necesitamos agregar el componente dentro del elemento deslizante para contener los botones.

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.

Lista iónica

A continuación, deslice el elemento deslizante 1 de derecha a izquierda. La siguiente salida aparece en su navegador.

Lista iónica


close