欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Element Breadcrumb 面包屑的使用方法

程序员文章站 2024-01-19 16:46:16
组件— 面包屑什么是面包屑导航一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航。例如:上面这个图表示我们当前的页面是breadcrumb面包屑,上一级目录是组件页面,再上一级目录是eleme...

组件— 面包屑

什么是面包屑导航

一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航。例如:

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 面包屑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!