Badge

Lazy4 的 Badge 是將原先的 Badge 與 Jewel 結合,可搭配其他組件一起使用。Badge 用於提醒使用者有新資料或是進一步告知比數。使用類別為 .badge 並且以此為相關組件的前綴詞。Badge 作為單純的訊息通知紅點 .badge-dot 或新訊息筆數統計 .badge-count 的定位容器,同時也可以單獨使用。

9
<i class="badge-dot"></i> <i class="badge-count"></i>

Demo Text 9
Demo Text 9
<span> <i class="badge-count"></i> </span> <span class="badge"> <i class="badge-count"></i> </span>

搭配 Button 使用。



<button class="btn"> <i class="badge-count"></i> </button> <button class="btn badge"> <i class="badge-count"></i> </button> <button class="btn badge"> <i class="badge-dot"></i> </button>

搭配 Avatar 使用。

K 9
<div class="avatar badge"> <span class="avatar_obj"></span> <i class="badge-count"></i> </div>