Indicator
Indicator 不是一個組件項目，而是 Label, Pin, Ribbon, Caret 等元件集合。
Label
用於作為資料標籤，與 Tag 相似但更為簡易，可視為簡易版的 Tag。使用類別為 .label。
Label1 Label2 Label3 Label4
<span class="label"></span>
配色
Label 的配色可使用基本色、色票群等，使用方式為 .clr:{*}。
PrimarySecondaryDarkLight
RedOrangeFireYellowOliveSapphireCyanMagentaBoneSilverMomoRosewoodSkinChartreuseGreenAegeanBlueVioletBrownGrayBlack
RedOrangeFireYellowOliveSapphireCyanMagentaBoneSilverMomoRosewoodSkinChartreuseGreenAegeanBlueVioletBrownGrayBlack
<span class="label clr:{code}"></span>
群組化
透過群組化可以將數個 Label 置入一個容器內可一次操作 DOM。新增一個 .label-grp 並將 .label 置入就可以了。
PrimarySecondaryDarkLight
<div class="label-grp">
<span class="label"></span>
</div>
另外可以將群組化的 Label 合併成一個組件，在 .label-grp 加上 :united 即可。
Lazy 4
Vue 2.3
<div class="label-grp :united"></div>
Pin
用於標記位置，常使用於地圖相關組件。使用類別為 .pin。
<div class="pin"></div>
若是想填滿中間的顏色，可加上 .:fill。
<div class="pin :fill"></div>
加上 .sz:sm 可放大 Pin 組件。
<div class="pin sz:lg"></div>
配色
Pin 組件可搭配基本色，使用方式為 .clr:{*}。
<div class="pin clr:{code}"></div>
Ribbon
用於使用表示已儲存或是作為特別標記。使用類別為 .ribbon
<div class="ribbon"></div>
配色
Ribbon 組件可搭配基本色，使用方式為 .clr:{*}。
<div class="ribbon clr:{code}"></div>
Caret
用於標示方向或是收合指示，經常搭配其他組件。使用類別為 .caret。Caret 預設為向下，若要只像其他方位可使用：向上 :up、向右 :right、向左 :left
<span class="caret"></span>
<span class="caret :up"></span>
<span class="caret :left"></span>
<span class="caret :right"></span>