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.
Иконки
В mdui встроено 932 иконки Material Icons. Помимо них, вы также можете использовать сторонние иконки.
Связанное чтение
Пример использования
Мы перечислили все иконки Material Icons. Вы можете нажать на нужную иконку, чтобы скопировать её код.
Пример
<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>Если иконка используется в плоской кнопке или плавающей кнопке действия, необходимо также добавить класс mdui-icon-left или mdui-icon-right, чтобы расположить иконку слева или справа от текста кнопки.
Пример
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow" disabled>
<i class="mdui-icon mdui-icon-right material-icons">share</i>
Share</button
>Сторонние библиотеки иконок
Для использования сторонних библиотек иконок необходимо сначала подключить соответствующий CSS-файл библиотеки.
Затем добавьте класс mdui-icon и класс сторонней библиотеки к элементу <i>.
В примере ниже используются иконки из ionicons.
Пример
<link rel="stylesheet" href="ionicons.css" />
<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon">
<i class="mdui-icon ion-plus-round"></i>
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left ion-share"></i> Share
</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent">
<i class="mdui-icon ion-plus-round"></i></button
>