Google MDL Badge - 徽章, 小红点?

Google MDL Badge

官方说明

效果

使用说明

MDL的Badge可作用于多数HTML元素, 如span, em, div, button等, 效果如上图

使用方法:

• 在class中加入mdl-badge, 并为其其它一个data-badge值 (如果不指定该值就无效了)

• 可选样式:

  1. 无背景色: mdl-badge–no-background
  2. 显示于元素上: mdl-badge–overlap

简单易懂, 一看就会

测试代码

    <div><em class="mdl-badge" data-badge = "5">Em Text</em></div>
    <div><span class="mdl-badge" data-badge = "5">Span Text</span></div>
    <div><span class="mdl-badge mdl-badge--no-background" data-badge = "5">Span Text No Background</span></div>
    <div><span class="mdl-badge  mdl-badge--overlap" data-badge = "5">Span Text Width Overlap</span></div>
    <div class="mdl-badge" data-badge = "5">Div Text ---------------------></div>
    <a href="#" class="mdl-badge" data-badge = "5">A Text</a>
    <div>Icons: <span class="mdl-badge material-icons" data-badge = "5">account_box</span></div>

    <div>Icons With Overlap:<span class="mdl-badge material-icons mdl-badge--overlap" data-badge = "5">account_box</span></div>
    <button class="mdl-badge mdl-badge--overlap" data-badge = "5">Button</button>