Material Design Lite 徽章

2018-12-19 18:17 更新

一个MDL徽章组分是屏幕上的通知可以是一个数字或图标。它通常用于强调的项目数。

该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于徽章。下表中提到的可用类和它们的影响。

SN 类名称和说明
1 MDL-徽章
标识元件作为一个MDL徽章组件。需要跨越或链接元素。
2 MDL-徽章-无背景
适用开放式循环效果徽章是可选的。
3 MDL-徽章-重叠
使得其容器徽章重叠,是可选的。
4 数据徽章=“值”
分配给徽章用作属性字符串值;在跨度或链路所需。

下面的例子展示了使用MDL-徽章类的补充通知跨度和链接元素。

这里使用以下MDL类。

  1. MDL-徽章 -识别元素作为MDL徽章组成部分。

  2. 数据徽章 -Assigns一个字符串值徽章。图标可以使用HTML码元被分配给它。

mdl_badges.htm

<html>
   <head>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >
      <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>

结果

验证结果。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号