面包屑
QBreadcrumbs （面包屑）组件在 UI 中用作导航辅助。帮助用户定位目前处于应用程序中的哪个页面。通常会用在QToolbar组件之中，但不局限于此。
QBreadcrumbs API
QBreadcrumbs API
props
5
slots
2
content
3
style
2
separator
: String
说明
用来分割面包屑的字符串
gutter
: String
说明
gutter 值控制面包屑元素之间的间隔。
align
: String
说明
设置面包屑的水平对齐方式
QBreadcrumbsEl API
QBreadcrumbsEl API
props
11
slots
1
events
1
content
3
navigation
7
state
1
label
: String
说明
面包屑的标签文本
icon
: String
说明
图标的名称，需确保已经安装了相关的图标库，除非使用了 'img:' 前缀来引用本地的图片，如果设置为 'none'，则不会渲染图标
tag
: String
说明
渲染为哪个 HTML 标签
用法
基础用法
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-breadcrumbs>
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs>
<q-breadcrumbs-el label="Home" icon="home" />
<q-breadcrumbs-el label="Components" icon="widgets" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs class="text-grey">
<q-breadcrumbs-el icon="home" />
<q-breadcrumbs-el icon="widgets" />
<q-breadcrumbs-el icon="navigation" />
</q-breadcrumbs>
</div>
</template>Copied to clipboard
Home
/
Components
/
Breadcrumbs
homeHome
/
widgetsComponents
/
Breadcrumbs
home
/
widgets
/
navigation
在一个 QToolbar 中使用
Template
<template>
<div class="q-pa-md">
<div class="bg-cyan text-white">
<q-toolbar>
<q-btn flat round dense icon="assignment_ind" />
<q-toolbar-title>Quasar</q-toolbar-title>
<q-btn flat round dense icon="sim_card" class="q-mr-xs" />
<q-btn flat round dense icon="gamepad" />
</q-toolbar>
<q-toolbar inset>
<q-breadcrumbs active-color="white" style="font-size: 16px">
<q-breadcrumbs-el label="Home" icon="home" />
<q-breadcrumbs-el label="Components" icon="widgets" />
<q-breadcrumbs-el label="Toolbar" />
</q-breadcrumbs>
</q-toolbar>
</div>
</div>
</template>Copied to clipboard
Quasar
homeHome
/
widgetsComponents
/
Toolbar
自定义分隔符
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-breadcrumbs separator="---" class="text-orange" active-color="secondary">
<q-breadcrumbs-el icon="home" />
<q-breadcrumbs-el label="Components" icon="widgets" />
<q-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
</q-breadcrumbs>
<q-breadcrumbs class="text-grey" active-color="purple">
<template v-slot:separator>
<q-icon
size="1.2em"
name="arrow_forward"
color="purple"
/>
</template>
<q-breadcrumbs-el label="Home" icon="home" />
<q-breadcrumbs-el label="Components" icon="widgets" />
<q-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
</q-breadcrumbs>
<q-breadcrumbs class="text-brown">
<template v-slot:separator>
<q-icon
size="1.5em"
name="chevron_right"
color="primary"
/>
</template>
<q-breadcrumbs-el label="Home" icon="home" />
<q-breadcrumbs-el label="Components" icon="widgets" />
<q-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
</q-breadcrumbs>
</div>
</template>Copied to clipboard
home
---
widgetsComponents
---
navigationBreadcrumbs
homeHome
arrow_forward
widgetsComponents
arrow_forward
navigationBreadcrumbs
homeHome
chevron_right
widgetsComponents
chevron_right
navigationBreadcrumbs
下面的示例在 UMD 中不可使用，因为它依赖 Vue Router（所以在 Codepen/jsFiddle 中也不能正常运行）。
关联路由
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-breadcrumbs>
<q-breadcrumbs-el icon="home" to="/" />
<q-breadcrumbs-el label="Docs" icon="widgets" to="/start/pick-quasar-flavour" />
<q-breadcrumbs-el label="Breadcrumbs" icon="navigation" to="/vue-components/breadcrumbs" />
<q-breadcrumbs-el label="Build" icon="build" />
</q-breadcrumbs>
</div>
</template>Copied to clipboard
间隔
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-breadcrumbs gutter="none">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-separator />
<q-breadcrumbs gutter="xs">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-separator />
<q-breadcrumbs gutter="sm">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-separator />
<q-breadcrumbs gutter="md">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-separator />
<q-breadcrumbs gutter="lg">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-separator />
<q-breadcrumbs gutter="xl">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
</div>
</template>Copied to clipboard
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
对齐
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-breadcrumbs align="left">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs align="center">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs align="right">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs align="between">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<q-breadcrumbs align="around">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
</div>
</template>Copied to clipboard
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
Home
/
Components
/
Breadcrumbs
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。