ChipChip

El componente Chip se usa para introducir información, realizar selecciones, filtrar contenido o ejecutar acciones relacionadas.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/chip.js';

Importa el tipo TypeScript cuando lo necesites:

import type { Chip } from 'mdui/components/chip.js';

Uso:

Chip

<mdui-chip>Chip</mdui-chip>

Los atributos icon y end-icon permiten añadir iconos de Material Icons a la izquierda y derecha del chip respectivamente. También puedes añadir elementos a la izquierda y derecha del chip mediante los slots icon y end-icon.

Icono

Icono final

Slot

<mdui-chip icon="search">Icono</mdui-chip>
<mdui-chip end-icon="arrow_forward">Icono final</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

Fuente

Enlace

Con el atributo href, el chip actúa como enlace; también puedes usar download, target y rel.

Enlace

<mdui-chip href="https://www.mdui.org" target="_blank">Enlace</mdui-chip>

Fuente

Estados deshabilitado y de carga

El atributo disabled deshabilita el chip; añade el atributo loading para añadir un estado de carga al chip.

Deshabilitado

Cargando

Cargando y deshabilitado

<mdui-chip disabled>Deshabilitado</mdui-chip>
<mdui-chip loading>Cargando</mdui-chip>
<mdui-chip loading disabled>Cargando y deshabilitado</mdui-chip>

Fuente

Seleccionable

El atributo selectable hace que el chip sea seleccionable.

Chip

<mdui-chip selectable>Chip</mdui-chip>

Fuente

El atributo selected-icon define el nombre del icono de Material Icons en estado seleccionado. También puedes proporcionar el elemento del icono en estado seleccionado mediante el slot selected-icon.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Fuente

Cuando el chip está seleccionado, el atributo selected pasa a valer true. También puedes añadir el atributo selected para que el chip esté seleccionado por defecto.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Fuente

Eliminable

Al añadir el atributo deletable, aparece un icono de eliminar en el lado derecho del chip. Al hacer clic en este icono se activa el evento delete. También puedes definir el nombre del icono de Material Icons para el botón de eliminar mediante el atributo delete-icon, o especificar el elemento del icono mediante el slot delete-icon.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Variante del chip. Los valores posibles son: `assist`: Se utiliza para mostrar acciones auxiliares relacionadas con el contexto actual, como compartir, marcar como favorito en una página de pedidos `filter`: Se utiliza para filtrar contenido, como filtrar resultados de búsqueda en una página de resultados `input`: Se utiliza para representar fragmentos de información introducidos por el usuario, como contactos en el campo "Para" de Gmail `suggestion`: Se utiliza para proporcionar información recomendada generada dinámicamente para simplificar las acciones del usuario, como predecir mensajes que el usuario podría querer enviar en una aplicación de chat
`elevated`	`elevated`	`boolean`	`false`
Indica si se muestra sombra.
`selectable`	`selectable`	`boolean`	`false`
Indica si se puede seleccionar.
`selected`	`selected`	`boolean`	`false`
Indica si está seleccionado.
`deletable`	`deletable`	`boolean`	`false`
Indica si se puede eliminar. Cuando es `true`, se muestra un icono de eliminar a la derecha del chip.
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante `slot="icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nombre del icono de Material Icons a la izquierda en el estado seleccionado. También se puede establecer mediante `slot="selected-icon"`.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons a la derecha. También se puede establecer mediante `slot="end-icon"`.
`delete-icon`	`deleteIcon`	`string`	-
Nombre del icono de Material Icons para el icono de eliminar a la derecha cuando se puede eliminar. También se puede establecer mediante `slot="delete-icon"`.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`loading`	`loading`	`boolean`	`false`
Indica si está en estado de carga.
`name`	`name`	`string`	`''`
Nombre del botón que se enviará con los datos del formulario. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href`.
`value`	`value`	`string`	`''`
Valor inicial del botón que se enviará con los datos del formulario. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Tipo del botón. El tipo predeterminado es `button`. Los tipos posibles son: `submit`: Al hacer clic en el botón, se enviarán los datos del formulario al servidor `reset`: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales `button`: Este tipo de botón no tiene comportamiento predeterminado Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href`.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href`.
`formaction`	`formAction`	`string`	-
Especifica la URL a la que se enviará el formulario. Si se especifica esta propiedad, anulará el atributo `action` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href` y `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son: `application/x-www-form-urlencoded`: Valor predeterminado cuando no se especifica este atributo `multipart/form-data`: Se usa cuando el formulario contiene un elemento `<input type="file">` `text/plain`: Nuevo en HTML5, para depuración Si se especifica esta propiedad, anulará el atributo `enctype` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href` y `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son: `post`: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor `get`: Los datos del formulario se adjuntan al URI del formulario con `?` como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII Si se define esta propiedad, anulará el atributo `method` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Si se define esta propiedad, no se realizará la validación del formulario al enviarlo. Si se define esta propiedad, anulará el atributo `novalidate` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son: `_self`: Opción predeterminada, abrir en el marco actual `_blank`: Abrir en una nueva ventana `_parent`: Abrir en el marco principal `_top`: Abrir en la ventana completa Si se define esta propiedad, anulará el atributo `target` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`invalid`
Se dispara cuando falla la validación del campo del formulario.
`change`
Se dispara cuando cambia el estado de selección.
`delete`
Se dispara al hacer clic en el icono de eliminar.

Slots

Nombre
(predeterminado)
Texto del chip.
`icon`
Elemento a la izquierda.
`end-icon`
Elemento a la derecha.
`selected-icon`
Elemento a la izquierda en el estado seleccionado.
`delete-icon`
Elemento de eliminar a la derecha cuando se puede eliminar.

CSS Parts

Nombre
`button`
Elemento interno `<button>` o `<a>`.
`label`
Texto del chip.
`icon`
Icono a la izquierda.
`end-icon`
Icono a la derecha.
`selected-icon`
Icono a la izquierda en el estado seleccionado.
`delete-icon`
Icono de eliminar a la derecha cuando se puede eliminar.
`loading`
Elemento `<mdui-circular-progress>` en estado de carga.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Checkbox Checkbox

Capítulo siguiente

CircularProgress Progreso circular

ChipChip

Uso

Ejemplos

Forma

Sombra

Icono

Enlace

Estados deshabilitado y de carga

Seleccionable

Eliminable

API

Propiedades

Métodos

Eventos

Slots

CSS Parts

CSS Custom Properties