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.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark 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).
Applies the light theme variant to the component.
The default 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;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
Large breadcrumbs have larger font size.
Breadcrumbs separator can be set using divider property.
어떤 머티리얼 디자인 아이콘이든 사용할 수 있습니다.
You can use the item slot to customize each breadcrumb.
더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!