Indicators

Indicators 提供一些圖形裝飾或是提供訊息通知的符號。包含了 Badge, Jewel, Label, Pin, Ribbon 以及 Caret。


Badges

用於展示新訊息或是未讀取時的符號,只要在 <span> 加上 .badge 即可。

<a>信箱 <span class="badge">10</span><a>
<a class="btn color-primary">Button <span class="badge">10</span><a>

Jewel

與 Badges 相同的用意,你可以當作這是小號的 Badge,它像是社交網站上的通知樣式。
只要在 <span> 加上 .jewel 即可。

3
<div class="demo-icon">
    <span class="jewel">2</span>
</div>

Labels

只要在 <span> 加上 .label 即可。如果要加上配色,請另外加上 .color-*
預設字級為 font-size: 87.5%,因此使用在不同地方時會隨著父層的字級做相對應改變。

NEW NEW NEW NEW NEW NEW NEW NEW
<span class="label">NEW</span>
<span class="label color-primary">NEW</span>
<span class="label color-secondary">NEW</span>
<span class="label color-focus">NEW</span>
<span class="label color-common">NEW</span>
<span class="label color-success">NEW</span>
<span class="label color-warning">NEW</span>
<span class="label color-error">NEW</span>

Pins

用於標示某一處,適合用在地圖的圖示。只要在 <span> 加上 .pin 即可。如果要加上配色,請另外加上 .color-*

<span class="pin"></span>
<span class="pin color-primary"></span>
<span class="pin color-secondary"></span>
<span class="pin color-focus"></span>
<span class="pin color-common"></span>
<span class="pin color-success"></span>
<span class="pin color-warning"></span>
<span class="pin color-error"></span>

Pin 提供另外兩種尺寸。

<span class="pin size-sm"></span>
<span class="pin"></span>
<span class="pin size-lg"></span>

由於 Pin 的中心為透明,如果你不希望如此,可以加上 .pin-fill,這樣能夠填補顏色。

<span class="pin pin-fill"></span>
<span class="pin pin-fill color-primary"></span>
<span class="pin pin-fill color-secondary"></span>
<span class="pin pin-fill color-focus"></span>
<span class="pin pin-fill color-common"></span>
<span class="pin pin-fill color-success"></span>
<span class="pin pin-fill color-warning"></span>
<span class="pin pin-fill color-error"></span>

Ribbons

用於裝飾或是寫上簡短的文字來加強重要性。
只要在 <span> 加上 .ribbon 即可。如果要加上配色,請另外加上 .color-*

Aug 20 Aug 20 Aug 20 Aug 20 Aug 20 Aug 20 Aug 20 Aug 20
<span class="ribbon"></span>
<span class="ribbon color-primary">Aug 20</span>
<span class="ribbon color-secondary">Aug 20</span>
<span class="ribbon color-focus">Aug 20</span>
<span class="ribbon color-common">Aug 20</span>
<span class="ribbon color-success">Aug 20</span>
<span class="ribbon color-warning">Aug 20</span>
<span class="ribbon color-error">Aug 20</span>

Ribbon 有另外提供兩種尺寸,分別加上 .size-lg.size-xl 就能夠使用不同的尺寸呈現。

No.1 No.1 No.1
<span class="ribbon">No.1</span>
<span class="ribbon size-lg">No.1</span>
<span class="ribbon size-xl">No.1</span>

Ribbon Flags

Ribbon Flags 單純用於裝飾。
只要在 <span> 加上 .ribbon-flag 即可。如果要加上配色,請另外加上 .color-*

<span class="ribbon-flag"></span>
<span class="ribbon-flag color-primary"></span>
<span class="ribbon-flag color-secondary"></span>
<span class="ribbon-flag color-focus"></span>
<span class="ribbon-flag color-common"></span>
<span class="ribbon-flag color-success"></span>
<span class="ribbon-flag color-warning"></span>
<span class="ribbon-flag color-error"></span>

Ribbon Banners

Ribbon Banner 只有單一尺寸,但提供 color-* 所有配色。

Kule Lazy 3
<div class="ribbon-banner">
    <div class="ribbon-content">~略~</div>
</div>

Kule Lazy 3
Kule Lazy 3
Kule Lazy 3
Kule Lazy 3
Kule Lazy 3
Kule Lazy 3
Kule Lazy 3
<div class="ribbon-banner color-primary">~略~</div>
<div class="ribbon-banner color-secondary">~略~</div>
<div class="ribbon-banner color-focus">~略~</div>
<div class="ribbon-banner color-common">~略~</div>
<div class="ribbon-banner color-success">~略~</div>
<div class="ribbon-banner color-warning">~略~</div>
<div class="ribbon-banner color-error">~略~</div>

Carets

三角箭頭的圖示,有四種方向,預設為向下。只要在 <span> 加上 .caret 即可。
顏色會隨著父層的文字顏色做自動變化,尺寸也會隨著父層字級做自動對應。

<span class="caret"></span>
<span class="caret caret-top"></span>
<span class="caret caret-left"></span>
<span class="caret caret-right"></span>

<a class="btn color-primary size-xs">Button <span class="caret"></span></a>
<a class="btn color-secondary size-sm">Button <span class="caret"></span></a>
<a class="btn color-focus">Button <span class="caret"></span></a>
<a class="btn color-success size-lg">Button <span class="caret"></span></a>
<a class="btn color-error size-xl">Button <span class="caret"></span></a>