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

    Chip Demo

    Chip Size

    El chip viene en tres tamaños:

    • Grande: adecuado para escenarios interactivos, por ejemplo, desencadenadores de acción
    • Medio: apropiado para áreas cortas, como el campo de destinatario de un redactor de mensajes de correo electrónico
    • Pequeño: lo mejor para escenarios con gran densidad de datos, como los valores de una celda en la cuadrícula

    Chip Types

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

    Interaction State

    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.

    State

    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.

    Remove 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.

    Chip Content

    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`

    Chip Styling

    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.

    Chips Area

    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.

    Usage

    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

    Additional Resources

    Temas relacionados:

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