v-breadcrumbs
组件是页面的导航助手。 它可以接受 Material Icons 图标或文本字符作为分隔符。 可以将对象数组传递给组件的 items 属性。 另外,还可以使用 v-breadcrumbs-item
或其他自定义标记来更好地控制面包屑。
默认情况下,v-breadcrumbs
将禁用所有到当前页面的嵌套路径。 您可以通过在 items
数组中的每个适用面包屑上使用 exact: true
来防止这种行为。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
v-breadcrumbs
props
slots
sass
name
darktype
booleandefault
falsedescription
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
name
dividertype
stringdefault
'/'description
指定项之间的分隔字符。
name
itemstype
arraydefault
[]description
每个面包屑对象的数组。
example
[
{
disabled: boolean
exact: boolean
href: string
link: boolean
text: string | number
to: string | object
}
]
name
largetype
booleandefault
falsedescription
将面包屑项文本的字体大小增加到 16px(默认为 14px)。
name
lighttype
booleandefault
falsedescription
为组件设置浅色主题。
name
defaultdescription
默认Vue 插槽。
name
dividerdescription
用于分隔器的插槽。
name
itemdescription
使用 items 属性时,用于覆盖默认 v-breadcrumbs-item
行为的插槽。
props
{
item: any[]
}
name
$breadcrumbs-even-child-paddingdefault
0 12px !default;
name
$breadcrumbs-flexdefault
0 1 auto !default;
name
$breadcrumbs-item-font-sizedefault
14px !default;
name
$breadcrumbs-item-large-font-sizedefault
16px !default;
name
$breadcrumbs-margindefault
0 !default;
name
$breadcrumbs-paddingdefault
0 14px !default;
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!