Divider
Prefix divider
VUE YesDivider 用來做為區隔線，與 <hr> 相似，但 Divider 可以搭配文字、簡易圖形。預設上下間隔各 20 pixel。類別名稱為 .divider，其他模式元件也以此為前綴詞。
預設
<div class="divider"></div>
<k-divider />
搭配文字
OR
<div class="divider">{文字}</div>
<k-divider>{文字}</k-divider>
搭配 Iconfont
<div class="divider">
<i class="icon {iconfont}"></i>
</div>
<k-divider>
<k-iconfont code="{iconfont}"></k-iconfont>
</k-divider>
間格距離設定
Divider 與 HR 相同，可以有不同間距可以選擇。使用方式為 .sz:*。
sz:0
sz:quarter
sz:half
sz:2x
sz:3x
sz:4x
<div class="divider sz:{x}"></div>
<k-divider sz="{x}" />
垂直分隔線
類別名稱為 .divider-vertical
OR
<div class="divider-vertical"></div>
<k-divider type="vertical" />
Dot Divider
用圓點做為區隔線使用，使用類別為 .divider-dots。與 Divider 不同的是 Dot Divider 是作為裝飾使用，無法置入文字或圖形。
<div class="divider-dots"></div>
<k-divider type="dots" />
間格距離設定
與 Divider 相同的使用方式。
<div class="divider-dots sz:{x}"></div>
<k-divider type="dots" sz="{x}" />
Light 模式
可用於深色背景時的區隔線配色，需要加上 .clr:light。
<div class="divider-dots clr:light"></div>
<k-divider type="dots" clr="white"></k-divider>
垂直區隔線
使用類別為 .divider-dots-vertical。
<div class="divider-dots-vertical"></div>
<k-divider type="dots-vertical" />
Vue
組件名稱為 <k-divider>。
Divider Attributes
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| type | String | vertical, dots, dots-vertical | 無 | type="dots" | 使用不同形式 Divider |
| sz | String | 0, quarter, half, 2x, 3x, 4x | 無 | sz="0" | 變更不同間距 |
| clr | String | light | 無 | clr="light" | 在深色背景中使用亮色，只限於 type 為 dots 或 dots-vertical 時 |