Lista

    Utilice el componente Lista para permitir que el usuario examine e interactúe con una colección continua y vertical de elementos con plantillas que contienen texto, iconos e imágenes, así como componentes como botones y avatares, entre otros. La lista es visualmente idéntica al componente Lista Ignite UI for Angular

    List Demo

    Type

    La Lista se puede insertar en un ajuste preestablecido con Lista de elementos de una línea o Lista de elementos de dos líneas, ambas conteniendo inicialmente diez elementos.

    Using the List in Figma

    Las listas son un grupo continuo de filas que muestran información que contiene datos primarios y acciones secundarias, representadas por texto e íconos. En Figma, se utiliza el diseño automático para crear la lista, que ajusta automáticamente el diseño y el espaciado según el contenido. Si una lista requiere menos elementos, los elementos innecesarios deben ocultarse manualmente. Para diseñar una lista con más elementos, el componente Lista debe separarse seleccionando Detach Instance en el menú contextual y luego aumentando los elementos de la lista duplicando uno existente. Coloque siempre los elementos de la lista debajo de sus encabezados relativos con un ancho horizontal y una alineación consistentes, y asegúrese de que no haya espacios entre los elementos.

    Capa Usar
    🚫 versión del componente Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    🚫 metadatos Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    Encabezado de lista Una instancia de un elemento de encabezado de lista
    1 articulo Una instancia de un elemento de lista de una o dos líneas
    2 artículo Una instancia de un elemento de lista de una o dos líneas
    3 artículo Una instancia de un elemento de lista de una o dos líneas
    4 artículo Una instancia de un elemento de lista de una o dos líneas
    5 artículo Una instancia de un elemento de lista de una o dos líneas
    6 artículo Una instancia de un elemento de lista de una o dos líneas
    7 Artículo Una instancia de un elemento de lista de una o dos líneas
    8 Artículo Una instancia de un elemento de lista de una o dos líneas
    9 Artículo Una instancia de un elemento de lista de una o dos líneas
    10 artículo Una instancia de un elemento de lista de una o dos líneas

    Estilismo

    La Lista viene con flexibilidad de estilo a través de las opciones disponibles para el color de fondo y los diferentes elementos utilizados en los Elementos de la Lista, como íconos y texto, así como componentes como Avatar, Insignia, Casilla de verificación, Icono, Progreso, Cambio, etc. con sus propias capacidades de estilo.

    Usage

    La Lista y los Elementos de la Lista tienen sus propios detalles de diseño, pero lo más importante es que siempre se debe recordar que la Lista es una colección de elementos similares que generalmente siguen una plantilla común. Por lo tanto, evite combinar varias plantillas dentro de la misma lista. Además, evite ocultar elementos y, en su lugar, proporcione marcadores de posición o elementos vacíos si falta cierto tipo de contenido. Por último, pero no menos importante, preste especial atención a la alineación de los elementos que constituyen la plantilla, ya que deben poder formar una continuidad vertical percibida.

    Hacer No

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.