The v-breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or text characters as a divider. An array of objects can be passed to the items property of the component. Additionally, slots exists for more control of the breadcrumbs, either utilizing v-breadcrumbs-item or other custom markup.
By default v-breadcrumbs will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using exact: true on each applicable breadcrumb in the items array.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Wendet die dunkle Theme-Variante für die Komponente an. Mehr Informationen zur Material Design Dokumentation für dunkle Themes.
Specifies the dividing character between items.
An array of objects for each breadcrumb.
[
{
disabled: boolean
exact: boolean
href: string
link: boolean
text: string | number
to: string | object
}
]Increase the font-size of the breadcrumb item text to 16px (14px default).
Wendet die helle Theme-Variante für die Komponente an.
Der Standard-Vue Slot.
The slot used for dividers.
The slot used to override default v-breadcrumbs-item behavior when using the items prop.
{
item: any[]
}0 12px !default;0 1 auto !default;14px !default;16px !default;0 !default;0 14px !default;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Large breadcrumbs have larger font size.
Breadcrumbs separator can be set using divider property.
For the icon variant, breadcrumbs can use any icon in Material Design Icons.
You can use the item slot to customize each breadcrumb.
Bereit für mehr? Weiter lesen mit: