Ant Design Vue Breadcrumb面包屑例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Ant Design Vue Breadcrumb面包屑例子</title> <script src="//www.itxst.com/package/vue/vue.min.js"></script> <script src="//www.itxst.com/package/ant-design-vue/antd.min.js"></script> <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" /> <style> body { padding-top: 10px } </style> </head> <body> <div id="app"> <a-breadcrumb> <a-breadcrumb-item>首页</a-breadcrumb-item> <a-breadcrumb-item><a href="">产品管理</a></a-breadcrumb-item> <a-breadcrumb-item><a href="">产品详情</a></a-breadcrumb-item> </a-breadcrumb> <br> 带图标 <a-breadcrumb separator=">"> <a-breadcrumb-item href=""> <a-icon type="home" /> </a-breadcrumb-item> <a-breadcrumb-item href=""> <a-icon type="user" /> <span>Application List</span> </a-breadcrumb-item> <a-breadcrumb-item> Application </a-breadcrumb-item> </a-breadcrumb> 自定义分隔符 <br> <a-breadcrumb> <span slot="separator" style="color: red">-></span> <a-breadcrumb-item>Home</a-breadcrumb-item> <a-breadcrumb-item href="">Application Center</a-breadcrumb-item> <a-breadcrumb-item href="">Application List</a-breadcrumb-item> <a-breadcrumb-item>An Application</a-breadcrumb-item> </a-breadcrumb> </div> <script> var app = new Vue({ el: '#app', data: { bottom: 200 } }); </script> </body> </html>
