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

    Using the List in Sketch

    La Lista es esencialmente un repetidor de filas que muestran datos como una colección vertical indexada de elementos. Utiliza Smart Layout para sus elementos, lo que permite ajustar el tamaño configurando uno o más de los elementos en ~Sin símbolo. Si necesita diseñar una lista con más elementos, la forma más fácil de hacerlo es insertando cualquiera de los tipos de Lista en su mesa de trabajo, haga clic derecho sobre ella y seleccione Detach from Symbol en la parte inferior del menú contextual. En su panel de capas, debajo del grupo Lista/Lista de elementos de una línea o Lista/Lista de elementos de dos líneas que acaba de aparecer, debería ver casi la misma estructura de capas que en Figma (consulte la tabla anterior). Las dos diferencias serán: verá una capa adicional en la parte inferior para 🌈 Background y no verá la capa 🚫 componentVersion en la parte superior.

    Ahora, después de separarlo, puede insertar encabezados o elementos adicionales desde el menú o simplemente duplicando uno existente. Coloque siempre los elementos y encabezados uno tras otro con un ancho y una alineación horizontales consistentes, asegurándose de que no haya espacios entre los elementos.

    Using the List in Adobe XD

    En Adobe XD, después de arrastrar un componente de lista en la mesa de trabajo, puede reducir el número de elementos simplemente eliminando los innecesarios o aumentarlo duplicando uno de los existentes. La lista presenta sus elementos en un Stack, por lo que cuando agregue o elimine elementos, se alinearán y distribuirán verticalmente automáticamente. Para cambiar su posición en la lista, debe arrastrarlos hacia arriba o hacia abajo hasta la posición deseada. A diferencia de Sketch, en Adobe XD no es necesario destruir el símbolo.

    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.