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.
Эффект ripple
При добавлении эффекта ripple при нажатии на элемент появляется расходящаяся волна.
Использование
Просто добавьте класс .mdui-ripple для активации эффекта.
Способ использования
Добавление эффекта ripple
Просто добавьте класс .mdui-ripple к элементу, и при клике на нем появится эффект ripple.
Пример
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Для использования на тегах, которые не могут содержать дочерние элементы (например, img, input), добавьте класс .mdui-ripple к их родительскому элементу.
Пример
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Выбор цвета ripple
По умолчанию ripple имеет тёмный фон. Если цвет фона задан через .mdui-color-[color] или используется тёмная тема, ripple по умолчанию будет белым.
Вы можете указать цвет ripple, добавив класс .mdui-ripple-[color].
Пример
<button class="mdui-btn mdui-ripple mdui-ripple-black mdui-color-yellow">black</button>
<button class="mdui-btn mdui-ripple mdui-ripple-white mdui-color-blue">white</button>
<button class="mdui-btn mdui-ripple mdui-ripple-red">red</button>
<button class="mdui-btn mdui-ripple mdui-ripple-blue">blue</button>