Breadcrumb
Prefix crumb
VUE YesBreadcrumb 主要用於顯示網站導覽結構並標示當前位置，組件容器以 .crumb 為類別名稱並以此為子組件的前綴詞，每一個結構節點可將 .crumb_item 用於 <span> 標籤上。每一個 .crumb_item 的內容可使用文字、icon 或是符號。
Product
Serial Number
End
<div class="crumb">
<span class="crumb_item">
<i class="icon"></i>
</span>
<span class="crumb_item"></span>
<span class="crumb_item"></span>
</div>
<k-crumb>
<k-crumb-item>
<i class="icon fas fa-home"></i>
</k-crumb-item>
<k-crumb-item>Product</k-crumb-item>
<k-crumb-item>Serial Number</k-crumb-item>
<k-crumb-item>End</k-crumb-item>
</k-crumb>
超連結 Hyperlink
若要使用超連結，可在 .crumb_item 內加入 <a class="crumb_link"></a>。
<div class="crumb">
<span class="crumb_item">
<a class="crumb_link">
<i class="icon"></i>
</a>
</span>
<span class="crumb_item">
<a class="crumb_link"></a>
</span>
<span class="crumb_item"></span>
</div>
<k-crumb>
<k-crumb-item to="/">
<i class="icon fas fa-home"></i>
</k-crumb-item>
<k-crumb-item href="#apple">
<i class="icon fab fa-apple"></i>
Apple
</k-crumb-item>
<k-crumb-item href="#iphone">iPhone</k-crumb-item>
<k-crumb-item>End</k-crumb-item>
</k-crumb>
尺寸 Sizes
Breadcrumb 除了預設尺寸之外，另外提供兩種尺寸可以使用，只要在 .crumb 加上小尺寸的 .sz:sm 或 大尺寸的 .sz:lg 即可。
Small
Large
樣式 Styles
Breadcrumb 除了預設的向右符號之外，另外提供五種符號可以選擇。
Dot
Bullet
Slash
Right-pointing angle quotation mark
Right arrow
Vue
組件名稱為 <k-crumb>。使用這個組件有兩種方式，一種是在 <k-crumb> 置放 <k-crumb-item>，如上方各個 Vue 範例；或是直接將資料注入到 <k-crumb>，由組件本身自己生成內容。
Crumb Attributes
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| chakra | Array | 無 | null | 如下方 DATA 範例 | 可將所有麵包屑路徑儲存至一個陣列中放入 chakra 屬性中，則可以自動生成每一個 Item。 |
| sz | String | sm, lg | null | sz="sm" | 變更尺寸大小 |
<k-crumb :chakra="crumb" sz="sm">
crumb: [
{
to: '/',
//使用 Vue router
icon: 'fas fa-home'
//使用 Icon
},
{
href: '#apple',
//使用連結
text: 'Apple',
//使用文字
icon: 'fab fa-apple'
//可同時使用 icon 與文字，若是同時設定 href 與 to，會以 href 為優先
},
{
href: '#iphone',
text: 'iPhone'
},
{
text: 'End'
//可只顯示文字不帶連結或路由
}
]
Crumb Item Attributes
可設定 href 或 to 來設定連結，若是都沒有設定的情況下，視為無連結，只有純文字或 Icon。
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| href | String | 無 | null | href="/product" | 可指定頁面或網址連結。 |
| target | String | _self, _parent, _top, _blank | _self | target="_blank" | 設定連結開啟方式，搭配 href 使用 |
| to | String | Object | 無 | null | to="/" | 使用 Vue router 指定路徑，若同時設定 href 則以 href 優先。 |
| replace | Boolean | true, false | false | :replace="true" | 設定是否記錄於 router 的 history，若為 true 則不紀錄。 |