Lista — un componente de lista universal que sirve como contenedor con filas de datos organizadas en una sola columna vertical. El componente ordena sus elementos de lista secundarios, admite múltiples tamaños y permite el control de selección por teclado y el filtrado.

§Estructura de la lista

➊ Área de filtro

➋ Elemento de lista

➌ Barra de desplazamiento (scrollbar)

➍ Elemento de lista bajo el cursor

§Estructura del elemento de lista

➊ Icono de ordenación

➋ Icono del elemento

➌ Bloque de texto

➍ Botón de acción adicional (mostrado al pasar el cursor)

§Tamaño

Elemento de lista

Todos los elementos de lista (List-item) admiten renderizado en 4 tamaños: S, M, L, XL. Los tamaños y rellenos corresponden a los elementos de la biblioteca con los que interactúa el componente, como select, input y button, que admiten variables de tamaño similares.

Lista

Por defecto, el ancho del componente Lista es dinámico y se calcula en base al ancho del elemento más largo de la lista. El ancho se puede establecer en un valor fijo o heredar el ancho del objeto que desencadenó la visualización de la lista (select, input).

§Estados

§Tipos de contenido

§Características del elemento de lista

Soporte para múltiples iconos

Los elementos List-item pueden tener uno o más iconos colocados a la izquierda y derecha del componente.

Cambiar el orden de clasificación

Para los elementos de la lista, puede activar la ordenación de elementos de lista. El icono de ordenación siempre se muestra en la parte superior de la lista por defecto.

§Características de la lista

Altura personalizable para el contenedor principal de la lista

La altura de los elementos de lista o una función que devuelve el valor de altura se puede establecer dinámicamente o especificar con un valor exacto en píxeles (px). Si los elementos de la lista exceden la altura máxima, aparece una barra de desplazamiento. La altura se puede establecer manualmente o ajustar dinámicamente.

Selección única y múltiple

El componente admite tanto la selección de un solo elemento como la selección múltiple.

Filtro y búsqueda

Opcionalmente, el componente puede incluir un campo de entrada para el filtrado rápido de elementos en la lista. El placeholder del filtro puede cambiarse por defecto dependiendo de la tarea del componente.

Disparadores de llamada

Por defecto, el componente de lista se activa mediante interacciones con otros elementos de la página como select, label y button, y sirve como una característica de sugerencia para el componente Input.

Virtualización

Cuando la bandera de virtualización está habilitada, el navegador renderiza solo un subconjunto de filas a la vez, reduciendo significativamente el tiempo requerido para volver a renderizar componentes. Con este método, también conocido como "carga infinita", se agregan nuevos elementos a la lista a medida que el usuario se desplaza hacia abajo hasta un elemento umbral específico (disparador).