1. 程式人生 > 程式設計 >Element Breadcrumb 麵包屑的使用方法

Element Breadcrumb 麵包屑的使用方法

元件— 麵包屑

什麼是麵包屑導航

一般頁面內容上方都會有一個路徑導航,這個導航就是麵包屑導航。例如:

Element Breadcrumb 麵包屑的使用方法

上面這個圖表示我們當前的頁面是Breadcrumb麵包屑,上一級目錄是元件頁面,再上一級目錄是Element UI頁面。當我們點選這些目錄時會返回到對應的頁面中去。再例如:

Element Breadcrumb 麵包屑的使用方法

上面這個圖表示我們當前所在的位置是活動詳情頁面,上一級目錄是活動列表頁面…以此類推。
這些就是麵包屑導航。

基礎用法

Element Breadcrumb 麵包屑的使用方法

<el-breadcrumb separator="/">
 <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
 <el-breadcrumb-item><a href="/" rel="external nofollow" >活動管理</a></el-breadcrumb-item>
 <el-breadcrumb-item>活動列表</el-breadcrumb-item>
 <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

圖示分隔符

Element Breadcrumb 麵包屑的使用方法

<el-breadcrumb separator-class="el-icon-arrow-right">
 <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
 <el-breadcrumb-item>活動管理</el-breadcrumb-item>
 <el-breadcrumb-item>活動列表</el-breadcrumb-item>
 <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

Breadcrumb Attributes

Element Breadcrumb 麵包屑的使用方法

Breadcrumb Item Attributes

Element Breadcrumb 麵包屑的使用方法

到此這篇關於Element Breadcrumb 麵包屑的使用方法的文章就介紹到這了,更多相關Element Breadcrumb 麵包屑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!