代码示例
- Home / Components / Breadcrumb
基础用法
最基础的用法，通过设置to属性添加链接。
<template>
<Breadcrumb>
<BreadcrumbItem to="/">Home</BreadcrumbItem>
<BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
export default {
}
</script>- Home / Components / Breadcrumb
带图标的
可自定义每项的内容，比如带有一个图标。
<template>
<Breadcrumb>
<BreadcrumbItem to="/">
<Icon type="ios-home-outline"></Icon> Home
</BreadcrumbItem>
<BreadcrumbItem to="/components/breadcrumb">
<Icon type="logo-buffer"></Icon> Components
</BreadcrumbItem>
<BreadcrumbItem>
<Icon type="ios-cafe"></Icon> Breadcrumb
</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
export default {
}
</script>- Home > Components > Breadcrumb
- Home => Components => Breadcrumb
分隔符
通过设置separator属性来自定义分隔符，比如>，也可以接受自定义的HTML字符串。
<style>
.demo-breadcrumb-separator{
color: #ff5500;
padding: 0 5px;
}
</style>
<template>
<Breadcrumb separator=">">
<BreadcrumbItem to="/">Home</BreadcrumbItem>
<BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<BreadcrumbItem to="/">Home</BreadcrumbItem>
<BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
export default {
}
</script>