代碼示例
- 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>