El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Chips

Los chips pueden contener una imagen, una cadena corta u otra información breve.

Modo de uso

El componente chip está escrito solo con CSS; basta con escribir el código HTML para que funcione.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Chip

Estilo

Solo texto

Ejemplo

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

Con avatar

Ejemplo

<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Con icono de texto

Ejemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Con icono

Ejemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Con botón de cierre

Ejemplo

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

Color del icono

Ejemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-chip`	Definir un componente chip.
`.mdui-chip-title`	Definir el texto del chip.
`.mdui-chip-icon`	Definir el avatar o el icono del chip.
`.mdui-chip-delete`	Definir el botón de eliminación del chip.

Tarjetas

Tooltips