Chips

Los Chips son elementos multifuncionales que pueden ser utilizados como tags, tipos, etiquetas y más. Su versatilidad permite filtrar contenido, seleccionar opciones y desencadenar acciones, lo que facilita enormemente la navegación y la interacción dentro de la plataforma.

Playground

Texto de chip

Texto de chip

DefaultInfoDangerSuccessWarningDisabled

Mostrar icono

Chip + Tooltip

Chip + Popover

Chip Wrap

Ruby

app/widgets/widget/chip.erb

<%= chip_widget("Texto de chip",
                              chip_color_class: :default 
                              )%>

Html

chip.html

<div class="chip badge badge-default " >
     "Texto de chip" 
</div>

Groovy

<g:chipComponent
        id=""
        class="default"
>
  Texto del chip
</g:chipComponent>
                

Lista de parámetros

Ruby

Propiedad	Tipo	Detalle
chip_class	String	Agrega propiedades scss a los chips
chip_text	String	Define el texto del chip
chip_color	String	Define el color del chip
chip_color_class	String	Define la clase de color adicional del chip
chip_icon	String	Define el icono del chip
chip_icon_source	String	Define procedencia del icono [:md] o *[:fa]
chip_info_type	Symbol	Define el tipo de elemento informativo que acompaña al chip, puede ser :tooltip o :popover
chip_info_content	Hash	Define el contenido que contendrá el elemento informativo, compuesto por title, content y append_to. Para los tooltips, el atributo append_to es por defecto false

Groovy

Propiedad	Tipo	Detalle
id	String	Determina el ID dentro del DOM del componente
class	String | primary | danger	Determina el tipo de chip y la clase dentro del DOM

---

Anatomía

1. Contenedor

Los contenedores de chips contienen todos los elementos de chips y su tamaño está determinado por esos elementos.

2. Left o Right Icon

Los Chips pueden llevar un ícono a la derecha o a la izquierda.

Los iconos posicionados en el lado izquierdo siempre cumplen un carácter estático/decorativo, que complemente la información del chip.

Mientras que los iconos ubicados al lado derecho incluyen una acción entre el usuario y el sistema: como por ejemplo desplegar un tooltip, popover o cerrar para eliminar el chip en caso de que se comporte como una etiqueta. En este caso, la acción Cerrar debe ubicarse siempre a la derecha, conviva o no con otro ícono.

No es posible utilizar dos íconos decorativos o dos de acción al mismo tiempo (ej: tooltip + cerrar).

3. Label text [opcional]

El texto puede ser el nombre de un estado o etiqueta/tipo.

Norma al escribir los nombres de los estados

Los estados siempre deben ser adjetivos en participio. Esto no aplica para los chips tipo "Default", ya que están asociados a otros contenidos, como tags, categorías, tipos de elemento, etiquetas, etc. No se utilizan para estados.