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
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>
<k-avatar class="badge">
{文字}
<i class="badge-count" slot="addon"></i>
</k-avatar>