Elemento de lista

    Utilice el elemento de lista para mostrar información repetida en el componente de lista con texto, íconos e imágenes y componentes como Switch y Checkbox, entre otros, para permitir a los usuarios realizar posibles acciones. El elemento de lista es visualmente idéntico a los componentes básicos de la Ignite UI for Angular

    List Item Demo

    Type

    En Sketch y Figma, el elemento de lista viene en tres tipos preestablecidos: encabezado para definir los encabezados de los grupos, una línea para elementos más cortos con solo una línea de texto principal y dos líneas para elementos más altos que admiten texto primario y secundario. En Adobe XD con solo dos ajustes preestablecidos puedes lograr lo mismo y mucho más, por lo que allí solo tenemos tipos de Encabezado y Elemento.

    Note

    Para garantizar una alineación adecuada en los casos en que un elemento de la lista consta de tres o cuatro líneas, se requiere el ajuste manual del Avatar y las Acciones para alinearlos en la parte superior. Esta alineación se considera el comportamiento esperado. Actualmente, esto es posible y está disponible en Figma Indigo.Design System y estos ajustes son fácilmente accesibles y factibles.

    Para lograr esta alineación superior, debe configurar los marcos State y Thumbnail en la parte superior izquierda. En casos excepcionales en los que las Acciones secundarias deban consistir en un contenedor de texto y un ícono de acción, también debe configurar el marco Secondary Actions en la parte superior derecha.

    State

    Los elementos admiten los siguientes estados interactivos: inactivo para el estado normal y activo para el estado seleccionado. En Figma los estados se pueden encontrar en Propiedad State en la barra lateral derecha. En Sketch, esto se logra con Symbol Overrides, mientras que en Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre estados. El elemento de la lista de encabezados no se puede seleccionar, por lo que no admite dichos estados.

    Area

    En Figma y Sketch, el elemento de lista tiene dos áreas distintas: acción primaria con contenido no interactivo como avatar y texto, y acción secundaria con acciones rápidas relacionadas con el elemento de lista. Cualquier combinación de una acción primaria y secundaria crea una plantilla de elementos de lista única que debe usarse de manera consistente en todos los elementos de una lista.

    En Adobe XD, el elemento de la lista tiene un grupo donde se presenta contenido no interactivo como avatar, barra de progreso y texto, así como un componente de acciones que contiene íconos procesables para el lado derecho del elemento. En ambas áreas, puede arrastrar componentes arbitrarios desde el panel Libraries para crear el diseño que necesita sin tener que destruir ninguno de los componentes de la plantilla o el elemento en sí.

    Primary Action in Figma and Sketch

    Hay cinco acciones principales de elementos de lista intercambiables disponibles en la propiedad Type en Figma y cuatro disponibles como Symbol Overrides en Sketch. Gracias al diseño inteligente en Sketch, los elementos de la lista se pueden ajustar aún más estableciendo elementos innecesarios en ~Sin símbolo.
    Avatar + Etiqueta + Descripción
    Casilla de verificación + etiqueta La casilla de verificación dentro de un elemento de lista no puede tener su propia etiqueta, por lo tanto, las etiquetas antes y después están configuradas en ~Sin símbolo en Sketch y la capa de etiqueta no está presente en Adobe XD. ¡Esta configuración no debe cambiarse!
    Icono + Etiqueta + Descripción
    Etiqueta + Progreso La barra de progreso lineal dentro de un elemento de lista no puede tener una etiqueta de valor, por lo tanto, está configurada en ~Sin símbolo en Sketch y la capa de etiqueta de valor no está presente en Adobe XD. ¡Esta configuración no debe cambiarse!
    Etiqueta

    Secondary Action in Figma and Sketch

    Hay 4 acciones secundarias de elementos de lista intercambiables en Figma y Sketch. En Figma, están disponibles en las propiedades del componente base Secondary Action, donde se pueden activar y desactivar, según el caso y las necesidades. El diseño automático en Figma ajustará automáticamente el componente según las propiedades seleccionadas. En Sketch, las acciones secundarias están disponibles como Symbol Overrides y, gracias al diseño inteligente, se pueden ajustar aún más estableciendo elementos innecesarios en ~Sin símbolo.
    Insignia
    Caja La casilla de verificación dentro de un elemento de lista no puede tener una etiqueta, por lo tanto, las etiquetas de antes y después están ocultas en Figma, configuradas en ~Sin símbolo en Sketch y la capa de etiqueta no está presente en Adobe XD. ¡Esta configuración no debe cambiarse!
    Texto e icono El texto y los iconos se pueden utilizar de forma independiente. En Figma, puede activar y desactivar el Contenedor de texto y ocultar uno o ambos íconos; en Sketch, configurarlos en ~Sin símbolo los ocultará.
    Interruptor de palanca Cambiar dentro de un elemento de lista no puede tener una etiqueta, por lo tanto, las etiquetas de antes y después están ocultas en Figma, configuradas en ~ Sin símbolo en Sketch y la capa de etiqueta no está presente en Adobe XD. ¡Esta configuración no debe cambiarse!

    Thumbnail in Adobe XD

    El componente Miniatura en el área izquierda de Lista de elementos en Adobe XD proporciona 3 opciones intercambiables a través del paradigma Component States para permitirle cambiarlas fácilmente. Esto hace posible crear un diseño coincidente para cada una de las acciones principales en Sketch.

    Actions in Adobe XD

    El componente Acciones que constituye el área derecha de Elementos de lista en Adobe XD proporciona 4 opciones intercambiables a través del paradigma Component States para permitirle cambiarlas fácilmente. Esto hace posible crear un diseño coincidente para cada una de las acciones secundarias en Sketch.

    Estilismo

    El elemento de lista viene con flexibilidad de estilo a través de las opciones disponibles para los diferentes elementos utilizados en él, como iconos, texto y componentes como Avatar, Insignia, Casilla de verificación, Icono, Progreso, Cambio, etc., cada uno con sus propias capacidades de estilo.

    Additional Resources

    Temas relacionados:

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