menuMDUIDocs
color_lens
Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Чипы

Чипы могут содержать краткую информацию, такую как изображение или короткая текстовая строка.

Использование

Компонент чипа написан на чистом CSS, для его работы достаточно написать HTML-код.

Стиль

Только текст

Пример
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

С аватаром

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

С текстовой иконкой

Пример
<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

С иконкой

Пример
<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>

С кнопкой удаления

Пример
<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>

Цвет иконки

Пример
<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>

Список CSS-классов

Имя классаОписание
.mdui-chipОпределяет компонент чипа.
.mdui-chip-titleОпределяет текст чипа.
.mdui-chip-iconОпределяет аватар или иконку чипа.
.mdui-chip-deleteОпределяет кнопку удаления чипа.