Indicator

Indicator 不是一個組件項目,而是 Label, Pin, Ribbon, Caret 等元件集合。


Label

用於作為資料標籤,與 Tag 相似但更為簡易,可視為簡易版的 Tag。使用類別為 .label

Label1 Label2 Label3 Label4
<span class="label"></span>

配色

Label 的配色可使用基本色、色票群等,使用方式為 .clr:{*}

Primary Secondary Dark Light
Red Orange Fire Yellow Olive Sapphire Cyan Magenta Bone Silver Momo Rosewood Skin Chartreuse Green Aegean Blue Violet Brown Gray Black
<span class="label clr:{*}"></span>

群組化

透過群組化可以將數個 Label 置入一個容器內可一次操作 DOM。新增一個 .label-grp 並將 .label 置入就可以了。

Primary Dark
Secondary Light
<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:{*}"></div>

Ribbon

用於使用表示已儲存或是作為特別標記。使用類別為 .ribbon

<div class="ribbon"></div>

配色

Ribbon 組件可搭配基本色,使用方式為 .clr:{*}

<div class="ribbon clr:{*}"></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>