v-breadcrumbs コンポーネントは、ページのナビゲーションヘルパーです。Material Icons のアイコンまたは文字を区切りとして使用できます。オブジェクトの配列は、コンポーネントのitemsプロパティに渡すことができます。さらに、v-breadcrumbs-itemまたはその他のカスタムマークアップを利用して、パンくずリストをより細かく制御するためのスロットが存在します。
デフォルトでは、 v-breadcrumbsはネストされたパスの現在のページまでの、すべてのbreadcrumbを無効にします。 items配列の該当する各breadcrumbで exact: true を使用することで、この動作を防ぐことができます。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
項目間の区切り文字を指定します。
各パンくずのオブジェクトの配列。
[
{
disabled: boolean
exact: boolean
href: string
link: boolean
text: string | number
to: string | object
}
]パンくず項目のテキストのフォントサイズを16px（デフォルトは14px）にします。
コンポーネントにlightテーマを適用します。
デフォルトの Vue slot
区切りに使うスロット
items propを使用する際に、デフォルトの v-breadcrumbs-item の動作を上書きするために使用されるスロットです。
{
item: any[]
}0 12px !default;0 1 auto !default;14px !default;16px !default;0 !default;0 14px !default;以下に、簡単な例から複雑な例まで示します。
Large指定されたパンくずリストはフォント サイズが大きくなります。
区切り記号は、divider プロパティを使用して設定できます。
icon 変数を使用することで、 Material Design Icon に存在するアイコンを Breadcrumbs に使用することができます。
'item' スロットを使用して、各breadcrumbをカスタマイズできます。