Counters

像是社交網站的 Like 或是 Share 一樣的模組。

預設樣式

Counters 的元件只有外層的 .counter 以及統計數量的 .counter-box,而按鈕使用 Buttons 的基本元件,並且不需要設定尺寸,預設大小與 .size-xxs相同。

<div class="counter">
    <a class="btn">訂閱</a>
    <a class="btn">分享</a>
    <span class="counter-box">99+</span>
</div>

設定顏色

當你需要在 Counters 上設定顏色時,可以直接在 .counter 直接加上 .color-*,如果你要在一個 Counter 裡設定不同的按鈕顏色,就必須要在 .btn 設定 Class。

Like 99+
Like 99+
Like 99+
Like 99+
Like 99+
Like 99+
Like 99+
<div class="counter color-primary">~略~</div>
<div class="counter color-secondary">~略~</div>
<div class="counter color-focus">~略~</div>
<div class="counter color-common">~略~</div>
<div class="counter color-success">~略~</div>
<div class="counter color-warning">~略~</div>
<div class="counter color-error">~略~</div>
Share 99+ Like 99+
<div class="counter">
    <a class="btn color-primary">Share</a>
    <span class="counter-box">99+</span>
    <a class="btn color-focus">Like</a>
    <span class="counter-box">99+</span>
</div>

狀態

Counter 也跟其他部分組件相同,都有作用中的 .active 以及 禁用中的 .disabled,唯一比較不同的是 .active 只能設定在 .btn 上,而 .disabled 可以設定在 .btn 以及 .counter 上。

Share 99+
Share 99+
Share 99+
<div class="counter">
    <a class="btn color-primary active">Share</a>
    <span class="counter-box">99+</span>
</div>

<div class="counter">
    <a class="btn color-primary disabled">Share</a>
    <span class="counter-box">99+</span>
</div>

<div class="counter disabled">
    <a class="btn color-primary">Share</a>
    <span class="counter-box">99+</span>
</div>