near_me
Начало работы
keyboard_arrow_downlayers
Стили
keyboard_arrow_downwidgets
Компоненты
keyboard_arrow_downЭффект rippleКнопкиПлавающая кнопка (FAB)Выпадающий списокРазделительРаскрывающаяся панельТекстовое полеЭлементы выбораСлайдерСписокЭлементы управления спискаСетка-списокВкладкиТулбарПанель приложенияБоковая панель (Drawer)Нижняя навигацияКарточкиЧипыТултипыСнэкбарыТаблицыДиалогиМенюИндикаторы прогресса
local_mall
Ресурсы
keyboard_arrow_downНовый 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>