Chip

    Utilice el componente de chip como una imagen compacta que se muestra en forma circular para mostrar etiquetas e información de personas, por ejemplo, para los destinatarios de un correo electrónico. El chip es visualmente idéntico a la Ignite UI for Angular

    Demostración de chips

    Densidad de virutas

    El Chip viene en tres variantes de densidad:

    • Cómodo: adecuado para escenarios interactivos, por ejemplo, desencadenantes de acciones
    • Acogedor: apropiado para áreas cortas, como el campo de destinatario de un redactor de mensajes de correo electrónico.
    • Compacto: ideal para escenarios con gran densidad de datos, como los valores de una celda en la cuadrícula.

    Tipos de chips

    El chip ofrece dos variantes de tipo: predeterminado y primario.

    Estado de interacción

    El chip puede estar en estado habilitado o deshabilitado. En Figma, puede cambiar el estado usando la operación booleana Desactivada desde el panel de propiedades. En Sketch, debes elegir el estado antes de insertar el componente. En Adobe XD utilizamos el paradigma de Estados de componentes para permitirle cambiar fácilmente entre ellos.

    Estado

    Cuando el usuario interactúa con el chip, puede cambiar del estado inactivo predeterminado a suspendido, enfocado y seleccionado. Esto permite un diseño de interacción más dinámico que puede fluir sin problemas hacia la creación de prototipos de alta fidelidad. En Figma estos se pueden seleccionar desde la propiedad Estado en el panel de propiedades. 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.

    También notará un estado más llamado Plantilla, que se usa internamente en la interfaz del Filtro avanzado de cuadrícula. En Figma, Chip Templated es un componente separado, mientras que en Sketch y Adobe XD se puede seleccionar como Estado del componente principal de Chip.

    Quitar chip

    Cuando se pueda quitar un chip, aparecerá un ícono de cancelación especial en el extremo derecho para indicarlo. En Figma, el icono de eliminación se puede mostrar/ocultar utilizando la propiedad booleana Eliminar icono. En Sketch la anulación 🔣 Remove Icon proporciona los medios para activar esta funcionalidad. Las reglas de diseño inteligente aplicadas al Chip ajustan su diseño en consecuencia. En Adobe XD, la capa 🔣 Remove Icon debe hacerse visible para lograr lo mismo y Stack on the Chip ajustará su diseño de manera similar. Si no desea que el Chip sea extraíble, simplemente elimine la capa 🔣 Remove Icon.

    Contenido de las fichas

    El chip tiene un amplio soporte para plantillas de contenido a través de contenedores de prefijos y sufijos, lo que permite insertar íconos y texto antes y después de la etiqueta principal.

    En Figma, puede mostrar u ocultar los íconos de prefijo y sufijo usando las propiedades "Icono de prefijo" e "Icono de sufijo" en el panel de propiedades y el diseño se ajustará en consecuencia.

    En Sketch, los contenedores de prefijos y sufijos se pueden agregar buscándolos en Anulaciones/Entrada/Prefijo/Contenedor y Anulaciones/Entrada/Sufijo/Contenedor o eliminarlos configurándolos en ~Sin símbolo, tras lo cual el diseño se ajustará en consecuencia.

    En Adobe XD, debe hacer visibles las capas deseadas y eliminar de ellas los elementos innecesarios. Si desea eliminar un prefijo o sufijo de una sola vez, simplemente elimínelo por completo. Al final, el diseño se ajustará gracias al Stack que se esté utilizando.

    `Texto``Prefijo``Prefijo+Sufijo``Sufijo`

    Estilo de chip

    El Chip viene con flexibilidad de estilo a través de las diversas opciones para los colores de borde y fondo, así como el texto y los colores de prefijo, sufijo, selección y eliminación de íconos, cuando corresponda.

    Área de Fichas

    Utilice el componente Área de fichas para organizar una colección de fichas. El área de chips es idéntica al área de chip utilizada en Ignite UI for Angular, que se explica detalladamente en el tema de ayuda Ignite UI for Angular Chip Component.

    El área de Chips viene con la flexibilidad de estilo inherente de Chips.

    Uso

    Cuando se utiliza un chip, el obround automáticamente se ajustará a su tamaño para ajustarse al contenido y usted solo necesita ajustar el tamaño de la instancia en consecuencia. Si el chip se utiliza como activador de acción para contenido relacionado, evite usarlo en escenarios donde solo hay una acción disponible o para configuraciones que presentan solo una opción seleccionable.

    Hacer No

    Recursos adicionales

    Temas relacionados:

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