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>

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

Реклама