面包屑(Breadcrumbs)

Quasar Breadcrumbs是UI中用作导航辅助的组件。 它允许用户跟踪他们在程序、文档或网站中的位置。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QBreadcrumbs',
    'QBreadcrumbsEl'
  ]
}

基础用法

<q-breadcrumbs>
  <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
  separator="->"
  active-color="secondary"
  color="light"
>
  <q-breadcrumbs-el label="Home" to="/" />
  <q-breadcrumbs-el label="Components" to="/components" />
  <q-breadcrumbs-el label="Breadcrumbs" to="/components/breadcrums" />
  <q-breadcrumbs-el label="Bogus" to="/components/breadcrums/bogus" />
</q-breadcrumbs>

将分隔符作为范围插槽（在下面例子中为图标，但可以是任何内容）：

<q-breadcrumbs>
  <q-icon name="trending_flat" slot="separator" slot-scope="props" />

  <q-breadcrumbs-el active>Home</q-breadcrumbs-el>
  <q-breadcrumbs-el>Components</q-breadcrumbs-el>
  <q-breadcrumbs-el>Breadcrumbs</q-breadcrumbs-el>
</q-breadcrumbs>

不同的走向：

<q-breadcrumbs align="center">
  <q-icon name="arrow_forward" slot="separator" slot-scope="props" />

  <q-breadcrumbs-el>Home</q-breadcrumbs-el>
  <q-breadcrumbs-el>Components</q-breadcrumbs-el>
  <q-breadcrumbs-el>Breadcrumbs</q-breadcrumbs-el>
</q-breadcrumbs>

QBreadcrumbs Vue属性

Vue属性 类型 说明
color 字符串 来自Quasar调色板的颜色
active-color 字符串 活动元素的颜色，来自Quasar调色板
separator 字符串 在面包屑元素之间的分隔符文本
align 字符串 ‘left’, ‘right’, ‘center’, ‘between’, ‘around’之一。

QBreadcrumbsEl Vue属性

Vue属性 类型 说明
label 字符串 元素标签
icon 字符串 元素图标
color 字符串 来自Quasar调色板的颜色

使用QBreadcrumbsEl作为路由器链接

如果你想让你的QBreadcrumbsEl和Vue的<router-link>一样，那么你可以使用这些附加属性（它和<router-link>完全一样）：

属性 类型 说明
to 字符串/对象 路由导航到
exact 布尔值 在添加router-link-active CSS类时，匹配指定的确切路由（而不是其子节点）。
append 布尔值 导航时将路由定义追加到当前路由。
replace 布尔值 使用新路由替换当前路由，而不是将其添加到窗口历史记录队列。

有关这些属性的更多详细信息，请参阅Vue路由器文档。

上下文菜单 分页