Material Design Lite. Badge

Рассмотрим использование бейджиков в MDL.

Бейджики представляют собой кружочки с числами или значками. Например, можно выводить количество новых сообщений и т.п. Желательно использовать не более трёх символов.

Классы, которые могут пригодиться при работе с бейджами.

• mdl-badge - Задаёт компонент для бейджа. Используется для span или для ссылок.
• mdl-badge--no-background - Не закрашивает бейдж. По желанию.
• mdl-badge--overlap - Перекрывает родительский контейнер. По желанию.
• data-badge="value" - Атрибут, содержащий строку. Используется для span или для ссылок.

Бейджи можно выводить у значков.

<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="3">account_box</div>
   
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>

У текста.

<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>
<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>

Добавляется бейджик следующим образом на примере ссылки.

Допустим, у нас есть ссылка <a> или <span>.

<a href="//alexanderklimov.ru">У вас есть непрочитанные сообщения.</a>

Добавляем нужные классы.

<a href="//alexanderklimov.ru" class="mdl-badge">У вас есть непрочитанные сообщения.</a>

Добавляем атрибут data-badge и нужную строку в кавычках.

<a href="//alexanderklimov.ru" class="mdl-badge" data-badge="3">У вас есть непрочитанные сообщения.</a>

Бейдж готов к использованию.

Варианты бейджиков

Бейдж относится к ссылке и кликабелен.

<a href="#" class="mdl-badge" data-badge="3">Сообщения.</a>

Можно сделать бейдж отдельно от ссылки.

<a href="#">Сообщения.</a>
<span class="mdl-badge" data-badge="12"></span>

Можно сделать бейдж незакрашенным через класс mdl-badge--no-background.

<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">Сообщения.</a>

Посмотреть примеры с бейджами

Реклама