Учебники

Материал Дизайн Lite — Значки

Январь 31, 2019

Компонент значка MDL — это экранное уведомление, которое может быть числом или значком. Обычно используется, чтобы подчеркнуть количество предметов.

MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений к значкам. В следующей таблице перечислены доступные классы и их эффекты.

Sr.No. Имя класса и описание
1

лея-значок

Определяет элемент как компонент значка MDL. Требуется для элемента span или link.

2

лея-значок — нет-фон

Применяет эффект открытого круга к значку и является необязательным.

3

MDL-пропуск — перекрытие

Делает значок наложенным на свой контейнер и является необязательным.

4

данные жетоны = «значение»

Присваивает строковое значение значку, используемому в качестве атрибута; требуется на промежуток или ссылку.

лея-значок

Определяет элемент как компонент значка MDL. Требуется для элемента span или link.

лея-значок — нет-фон

Применяет эффект открытого круга к значку и является необязательным.

MDL-пропуск — перекрытие

Делает значок наложенным на свой контейнер и является необязательным.

данные жетоны = «значение»

Присваивает строковое значение значку, используемому в качестве атрибута; требуется на промежуток или ссылку.

пример

Следующий пример поможет вам понять использование класса mdl-badge для добавления уведомлений в span и link элементов.

Классы MDL, приведенные ниже, будут использованы в этом примере.

  • mdl-badge — определяет элемент как компонент значка MDL.

  • data-badge — назначает строковое значение значку. Иконки могут быть назначены ему с помощью символов HTML.

mdl-badge — определяет элемент как компонент значка MDL.

data-badge — назначает строковое значение значку. Иконки могут быть назначены ему с помощью символов HTML.

mdl_badges.htm

Live Demo

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Результат

Проверьте результат.

36
Share: